Web 前 端 开发 技术 区 下 


HTML5 


@ 周文 洁 编著 








循序 渐进 | 
实用 性 强 | 


易于 理解 | 


渡 著 大 学 出 版 社 


We6 前 应 开发 技术 ES 下 





企业 网 站 开发 真实 商业 案例 
HTML5 
网 页 前 端 设 计 实 战 


@ 周文 洁 编著 


所 壮大 党 出 版 社 


北京 


内 容 简 介 


本 书 是 《HTMLS 网 页 前 端 设计 》 一 书 的 配套 实战 项 目 教程 ， 也 可 单独 为 具有 一 定 Web 前 端 基础 的 读者 
使 用 。 本 书 的 电子 资源 包括 全 套 例题 源 代码 可 供 读者 下 载 。 

全 书 共 包 含 10 章 ， 每 章 均 配 套 两 个 实例 项 目 。 全 部 内 容 可 分 为 以 下 4 个 部 分 : 

第 一 部 分 是 基础 知识 篇 ， 包 括 第 1、2 章 的 内 容 。 其 中 ， 第 1 章 是 HTML+CSS 基础 项 目 ， 介 绍 导航 菜 
单 与 商务 风格 表格 的 设计 与 实现 ; 第 2 章 是 JavaScript 基础 项 目 ， 介 绍 电子 时 钟 与 电子 日 历 的 设计 与 实现 。 

第 二 部 分 是 重点 篇 ， 包 括 第 3 一 8 章 的 内 容 。 这 6 章 分 别 介绍 基于 HTMLS5 拖 放 API、 表 单 API、 画 布 
API、 媒 体 API、 地 理 定位 API 以 及 Web 存储 API 的 项 目 案例 。 其 中 较 有 特色 的 综合 项 目 有 手绘 时 钟 、 拼 
图 游戏 、 网 页 日 志 本 、 音 乐 播放 器 、 在 线 教学 视频 等 。 

第 三 部 分 是 提高 篇 ， 包 括 第 9 章 的 内 容 。 第 9 章 是 CSS3 基础 项 目 ， 主 要 讲解 使 用 CSS3 制作 火焰 和 过 
虹 文 字 特 效 以 及 使 用 CSS3 动画 制作 响应 式 放大 菜单 。 

第 四 部 分 是 综合 篇 ， 包 括 第 10 章 的 内 容 。 第 10 章 提供 了 两 个 完整 的 项 目 实例 ， 包 括 贪 吃 蛇 游 戏 的 开 
发 和 企业 文化 用 品 展示 网 站 的 设计 与 实现 。 这 两 个 项 目 实 例 综合 应 用 了 全 书 所 学 的 知识 ,让 读者 所 学 即 所 用 。 

本 书 可 作为 高 校 计算 机 相关 专业 HTML5 课程 的 实践 教材 , 也 可 作为 学 习 HTMLS5 开发 的 白 学 教材 或 培 
训 教 材 。 








本 书 封面 贴 有 清华 大 学 出 版 社 防伪 标签 ， 无 标签 者 不 得 销售 。 
版 权 所 有 ， 侵 权 必 究 。 侵 权 举 报 电话 : 010-62782989 13701121933 


图 书 在 版 编目 (CIP) 数据 


HTMLS5 网 页 前 端 设 计 实 战 /周文 洁 编著 .一 北京 : 清华 大 学 出 版 社 ，2017 
(Web 前 端 开发 技术 丛书 ) 
ISBN 978-7-302-46468-6 


I. OH… ”II. @ 周 … IH. @ 超 文本 标记 语言 -程序 设计 NV. CTP312.8 
中 国 版 本 图 书馆 CIP 数据 核 字 (2017) 第 024639 号 


责任 编辑 ， 魏 江 江 王 冰 飞 
封面 设计 : 

责任 校对 : 时 浴 兰 
责任 印 制 : 


出 版 发 行 : 清华 大 学 出 版 社 
网 址 : http://www.tup.com.cn, http://www.wqbook.com 
地  ” 址 : 北京 清华 大 学 学 研 大 厦 A 座 邮编 : 100084 
社 总 机 : 010-62770175 邮 ” 购 : 010-62786544 
投稿 与 读者 服务 : 010-62776969，c-service@tup.tsinghua.edu.cn 
质量 反馈 : 010-62772015，zhiliang@tup.tsinghua.edu.cn 
课件 下 载 : http://www.tup.com.cn，010-62795954 





印 刷 者 : 

装 订 者 : 

经 ” 销 : 全 国 新 华 书店 

开 本: 185mmX260mm ” 印 张 : 15 字 数 : 372 千 字 

版 ”次 : 2017 年 7 月 第 1 版 印 次 : 2017 年 7 月 第 1 次 印刷 
印 ” 数 : 

定 价 : 元 

产品 编号 : 073581-01 


本 书 是 《4HTMLS5 网 页 前 端 设计 》 一 书 的 配套 实战 项 目 教程 , 也 可 单独 为 具有 一 定 Web 
前 端 基础 的 读者 使 用 。 本 书 的 电子 资源 包括 全 套 例题 的 源 代 码 可 供 读者 下 载 。 

全 书 共 包 含 10 章 ， 每 章 均 配 套 两 个 实例 项 目 。 全 书 内 容 可 分 为 以 下 4 个 部 分 : 

第 一 部 分 是 基础 知识 篇 ， 包 括 第 1、2 章 的 内 容 。 其 中 ， 第 1 章 是 HTML+CSS 基础 项 
目 ， 介 绍 导航 菜单 与 商务 风格 表格 的 设计 与 实现 ， 第 2 章 是 JavaScript 基础 项 目 ， 介 绍 电 
子 时 钟 与 电子 日 历 的 设计 与 实现 。 

第 二 部 分 是 重点 篇 ， 包 括 第 3 一 8 章 的 内 容 。 这 6 章 分 别 介绍 基于 HTML5 拖 放 API、 
表单 API、 画 布 API、 媒 体 API、 地 理 定 位 API 以 及 Web 存储 API 的 项 目 案例 。 其 中 较 有 
特色 的 综合 项 目 有 手绘 时 钟 、 拼 图 游戏 、 网 页 日 志 本 、 音 乐 播放 器 、 在 线 教 学 视频 等 。 

第 三 部 分 是 提高 篇 , 包括 第 9 章 的 内 容 。 第 9 章 是 CSS3 基础 项 目 , 主要 讲解 使 用 CSS3 
制作 火焰 和 壳 虹 文字 特效 以 及 使 用 CSS3 动画 制作 响应 式 放大 菜单 。 

第 四 部 分 是 综合 篇 ， 包 括 第 10 章 的 内 容 。 第 10 章 提 供 了 两 个 完整 的 项 目 实例 ， 包 括 
贪 吃 蛇 游戏 的 开发 和 企业 文化 用 品 展示 网 页 的 设计 与 实现 。 这 两 个 项 目 实例 综合 应 用 了 全 
书 所 学 的 知识 ， 让 读者 所 学 即 所 用 。 

本 书 有 以 下 几 个 特点 。 

1， 知 识 全 面 ， 循 序 渐进 

本 书 首先 循序 渐进 地 介绍 了 一 些 基于 HTML、CSS 和 JavaScript 的 基础 项 目 ， 帮 助 读 
者 打 好 基本 功 ， 然 后 正式 进入 HIMLS 新 增 API 的 相关 项 目 介绍 ， 让 读者 有 针对 性 地 逐步 
巩固 常用 HIMLS 新 增 API 的 用 法 ; 接着 在 提高 篇 补充 了 CSS3 相关 技术 为 页 面 增加 特效 ; 
最 后 提供 了 两 个 完整 项 目 实例 ， 让 读者 进一步 提高 自己 对 于 知识 的 综合 应 用 能 力 。 

2. 项 目 驱动 ， 实 用 性 强 

全 书 将 主教 材 各 章节 的 知识 点 融入 综合 项 目 案例 中 ， 帮 助 读者 更 好 地 理解 所 学 知识 。 
在 本 书 的 最 后 一 章 还 包含 了 游戏 开发 以 及 企业 网 站 开发 的 真实 商业 案例 ， 具 有 较 高 的 实用 
价值 ， 也 适合 培养 读者 的 动手 能 力 。 

3. 步骤 详细 ， 易 于 理解 

本 书 思 路 清晰 、 知 识 点 循序 渐进 展开 ， 每 章 的 项 目 案例 均 分 步骤 讲解 ， 读 者 可 以 看 到 
从 界面 设计 开始 到 样式 美化 以 及 特效 完成 的 整个 变化 过 程 。 读 者 跟着 每 章 的 综合 案例 独立 
完成 开发 过 程 即 可 基本 达到 前 端 开发 的 要 求 。 

本 书 全 部 例题 均 在 浏览 器 中 调试 通过 ， 由 于 很 多 HTML5 和 CSS3 的 代码 需要 较 高 版 
本 的 浏览 器 才能 提供 更 好 的 体验 效果 ， 建 议 读者 使 用 但 不 限于 Intemet Explorer 10.0、 
































HTML5 网 页 弃 绞 旋 矿 完 战 


Chrome 17.0、Firefox 10.0、Safari 5.0 或 Opera 11.1 以 上 版 本 的 浏览 器 。 
最 后 感谢 家 人 和 朋友 给 予 的 关心 和 大 力 支持 ， 本 书 能 够 完成 与 你 们 的 鼓励 是 分 不 
开 的 。 
愿 本 书 能 够 对 读者 学 习 Web 前 端 新 技术 有 所 帮助 ， 并 真诚 地 欢迎 读者 批评 指正 , 希望 
能 与 读者 朋友 们 共同 学 习 成 长 ， 在 浩瀚 的 技术 之 海 不 断 前 行 。 








作 者 
2017 年 3 月 


1 2 


2.2 


第 3 章 


3.1 


3.2 


HTMLA+CSS 基础 项 目 1 
导航 栏 菜单 的 设计 与 实现 二 ee 1 


1.1.1 界面 设计 
1.1.2 鼠标 事件 … 















1.1.3 完整 代码 展示 
商务 风格 表格 的 设计 与 实现 … 
A On 6 
I ei 
1.2.3 完整 代码 展示 2 11 
JavaScript 基础 项 目 …………… 13 
电子 时 锦 的 设计 与 实现 :ni 谤 


2.1.1 界面 设计 - 








2.1.2 ”时钟 动态 效果 的 实现 …- ssi 
2.1.3 完整 代码 展示 18 
电子 旧历 的 设 讲 与 实现 oedemaiebi 19 
2.2.1 界面 设计 a 
2.2.2 显示 状态 栏 中 的 年 份 和 月 份 ………… 32 
有 23 
2.2.4 按钮 控件 功能 的 实现 … 2 
p 完整 代码 展示 TT 

MI = 31 
仿 回收 站 效果 的 设计 与 实现 31 
3.1.1 界面 设计 31 


3.1.2 文件 拖 忠 与 回收 功能 的 实现 
3.1.3 ”完整 代 码 展示 -… 










图 片 相框 展示 的 设计 与 实现 … -39 
3.2.1 界面 设计 ……………… 39 


3.2.2 ”相框 自动 生成 功能 的 实现 二 41 
3.2.3 完整 代码 展示 46 





HTML5 网 页 弃 绞 雁 矿 实战 











第 4 学 WES 下 单 APL 有 Ee 49 
4.1 用 户 注册 页 面 的 设计 与 实现 49 
4.1.1 界面 设计 50 

4.1.2 表单 设计 51 


第 6 


4.2 


3:2 


章 
6.1 


6.2 


4.1.3 ”提示 与 验证 功能 的 实现 … 
4.1.4 完整 代码 展示 - 





















问卷 调查 页 面 的 设计 与 实 ee 
DS 
4.2.2 表单 设计 -ee 
423 ”验证 功能 的 实现 - S 
py 党 入 代 间 属 未 全 全 生计 汪 让 计生 
HTMLS 画布 API 项 目 -He 79 
手 妈 时钟 的 设计 与 实现 :ii 79 
Si 名 而 入 守 ee ed 79 
5.1.2 ”实时 更 新 效 9 a 
5.1.3 完整 代码 展示 88 
拼图 游戏 的 设计 与 实现 和 91 
5.2.1 界面 设计 | 
5.2.2 ”实现 游戏 逻辑 …… :5 













5.2.3 ”游戏 成 功 与 重新 开始 … “102 
5.2.4 完整 代码 展示 和 0 105 
HTMLS 媒体 API 项 目 -7 111 
着 忒 所 法 好 的 役 计 与 这 疯 isisiiiieiiiii ii 
6 时 而 设计 ei 


6.1.2 媒体 文件 的 载 入 -… 
6134 控件 态 衣 的 袍 国 nee po 
6.1.4 完整 代码 展示 
在 线 教学 视频 的 设计 与 实 


6 半 面 i 
6.2.2 ”视频 文件 的 载 入 与 播放 …… 127 


6.2.3 ”视频 时 间 跳 转 的 实现 … 
6.2.4 完整 代码 展示 


HITMES 地 理 定 位 思 模 项 司 eeesen nei 133 


运动 数据 记录 页 面 的 设计 与 实现 sess 133 
和 lL 并 轩 设计 和 Se 134 


你 


8B:2 


第 9 章 
9.1 


9.2 


第 10 章 


10.1 


7.1.2 ”实时 监控 地 理 定位 135 
了 3 








7.1.4 

人 区 

运动 轨迹 绘制 页 面 的 设计 与 实现 

Le 1 i 







7.2.2 ”开始 与 结束 按钮 的 切换 … 








7.2.3 绘制 地 图 与 运动 轨迹 … 146 
7.2.4 计时 功能 的 实现 151 
7.2.5 ”完整 代码 展示 …………… 153 
HTMLS Web 存储 API 项 目 157 
基于 Web 存储 技术 的 网 页 主题 设置 ……………… 157 
8.1.1 界面 设计 - 

i 160 
8.1.3 ”加 载 网 页 主题 颜色 的 实现 ……………… 162 
8.1.4 完整 代码 展示 机 

基于 Web 存储 技术 的 网 页 日 志 本 -7 165 


8.2.1 界面 设计 2 165 
8.2.2 读 取 日 志 功能 的 实现 … 
8.2.3 保存 日 志 功能 的 实现 … 
8.2.4 删除 日 志 功能 的 实现 … 了 
8.2.5 完整 代码 展示 1 


C= CV 175 


使 用 CSS3 文本 阴影 制作 特殊 字体 效果 ………… 175 
2 

9.1.2 ”火焰 文字 效果 的 实现 … 
013， 壳 是 文 字 效 果 的 实现 
9 
使 用 CSS3 动画 制作 响应 式 放 大 菜单 - 
人 
522 动画 效果 的 实现 :caraceeeaaaaaeEnaanertanntaaa 
de 


综合 应 用 设计 实例 185 


基于 HTMLS5 的 贪 吃 蛇 游戏 的 设计 与 实现 区 185 
10.1.1 贪 吃 蛇 游 戏 简介 -7 185 
10.1.2 界面 布局 设计 185 














HTML5 网 页 碘 绢 帮 太 人 笑 此 


10.2 















的 未 二 攻 据 诡 章 贡 放 ee 
10.1.4 游戏 的 逻辑 实现 

10.1.5 ”完整 代码 展示 -……… 本 

实战 项 目 一 一 企业 文化 用 品 展示 网 页 的 开发 

10.2.1 

10.2.2 

10.2.3 ”页 眉 和 页 脚 的 实现 


10.2.4 主体 内 容 的 实现 
10.2.5 ”完整 代码 展示 ……………… 





第 1 章 HTML+CSS 基础 项 目 

















本 章 主要 包含 两 个 基于 HTML+CSS 的 应 用 设计 实例 , 一 是 导航 栏 菜 单 的 设计 与 实现 ， 
二 是 商务 风格 表格 的 设计 与 实现 。 在 导航 栏 菜 单项 目 中 ， 主 要 难点 为 超 链接 样式 的 设计 以 
及 鼠标 悬浮 与 点 击 事件 的 处 理 ， 在 商务 风格 表格 项 目 中 ， 主 要 内 容 包 括 表 格 总 体 样式 、 单 
元 格 样式 以 及 单元 行 样式 的 设计 实现 。 

本 章 学 习 目 标 : 

。 学 习 如 何 综 合 应 用 HTML 与 CSS 开发 导航 栏 菜单 样式 ; 

。 学 习 如 何 综合 应 用 HTML 与 CSS 开发 商务 风格 表格 样式 。 


1.1 导航 栏 菜单 的 设计 与 实现 
【 例 1-1】 简单 菜单 导航 栏 的 设计 与 实现 


功能 要 求 : 使 用 CSS 样式 可 以 制作 较为 美观 的 导航 栏 效果 ， 试 设计 - 
航 栏 用 于 页 面 ， 设 计 图 如 图 1-1 所 示 。 


- 款 横向 的 菜单 导 


日 -= 本 
站 导航 栏 菜单 的 设计 与 实现 x . 
| CQ 导航 栏 菜单 的 设计 与 实现 .html 


| 导航 栏 菜 单 的 设计 与 实现 











图 1-1 导航 栏 菜单 的 显示 效果 


1.1.1 界面 设计 
本 节 主要 介绍 导航 栏 菜单 的 界面 设计 ， 包 括 以 下 内 容 : 
。 导航 栏 的 创建 ; 
。 列表 样式 的 设计 ; 
。 超 链接 样式 的 设计 。 
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1. 导航 栏 的 创建 
使 用 <nav> 标 签 在 页 面 上 创建 导航 栏 菜单 区 域 。 相 关 HIMLS 代码 片段 如 下 : 
<body> 
<h3> 导 航 栏 菜单 的 设计 与 实现 </h3> 
<hr/> 
<! 一 -导航 栏 --> 
<nav> 
</nav> 
</body> 











<nav> 标 签 是 HIMLS 新 增 的 文档 结构 标签 , 用 于 标记 导航 栏 ， 以 便 后 续 与 网 站 的 其 他 
内 容 整 合 
在 <nav> 的 首尾 标签 之 间 使 用 无 序列 表 <ul> 标 签 配合 列表 选项 <li> 创 建 菜单 选项 。 相 关 


HIML5 





代码 片段 如 下 : 


<body> 


<h3> 导 航 栏 菜单 的 设计 与 实现 </h3> 

<hr/> 

<!-- 导 航 栏 --> 

<nav> 

<ul> 

<1i><a href="#"> 头 条 </a></1i> 
<1i><a href="#"> 娱 乐 </a></1i> 
<1i><a href="#"> 热 点 </a></1i> 
<1i><a href="#"> 体 育 </a></1i> 
<1i><a href="#"> 财 经 c/a></1i> 
<1i><a href="#"> 科 技 </a></1i> 


</ul> 
</nav> 
</body> 
其 中 选项 内 容 使 用 超 链接 的 形式 ， 链 接地 站 
址 当前 设置 为 #, 用 户 可 根据 实际 情况 改 成 具体 /sssaiaitsaa x 
的 URL 地 址 。 运 行 效果 如 图 1-2 所 示 。 人 了 G 9 组 条 单 的 设计 5 实现 html 测 三 | 





由 图 1-2 可 见 ， 导 航 菜单 中 的 文字 内 容 和 | 导航 栏 菜 单 的 设计 与 实现 


超 链接 已 经 完成 ， 用 户 单 击 不 同 的 选项 可 以 跳 


转 至 指定 的 页 面 。 


es 实心 点 标记 , 可 以 使 用 list-style 
属性 将 ] 





Ste 
时 会 带 有 <ul> 元 素 的 默认 样式 ， 即 每 个 














其 去 掉 ， 采 用 CSS 内 部 样式 表 的 形式 在 图 1.2 导航 栏 菜单 的 初步 显示 效果 


<head> 标 签 中 进行 声明 ， 相 关 代码 如 下 : 





<head> 


<meta charset="utf-8"> 
<title> 导 航 栏 菜单 的 设计 与 实现 </title> 
<style> 
1 
list-style: none; /* 用 于 去 掉 列表 的 实心 点 标记 */ 











margin: 07 
padding: 0; 
} 
</style> 
</head> 





其 中 ，margin 和 padding 属性 设置 为 0 是 为 了 预防 不 同 的 浏览 器 会 出 现 预 设 值 ， 以 避 
免 最 终 布局 效果 可 能 产生 的 误差 。 
为 列表 元 素 <li> 定 义 浮动 效果 ， 使 其 能 够 在 同一 行 显示 。 相 关 代 码 如 下 : 


<head> 
<meta charset="utf-8"> 
<title> 导 航 栏 菜单 的 设计 与 实现 </title> 
<style> 
… (ul 样式 代码 略 》 
EA 
float: left; 





} 
</style> 
</head> 





运行 效果 如 图 1-3 所 示 。 -= En 
由 图 1-3 可 见 ， 列 表 已 经 去 掉 了 实心 站 导入 栏 菜单 的 设计 与 实现 x 
点 标记 ， 并 且 每 个 列表 选项 均 在 同一 行 CQ 导航 栏 菜单 的 设计 与 实现 .html 局 三 
显示 。 导航 栏 菜单 的 设计 与 实现 
3 超 链接 样式 的 设计 ee = 一 
首先 在 CSS 内 部 样式 表 中 为 超 链接 | 娄 符 经 柬 热点 体育 财经 
重新 设置 样式 ， 具 体 要求 如 下 。 
。 颜色 : 背景 颜色 为 蓝 色 ， 字 体 颜 色 
为 白色 ; 
。 尺寸 :宽度 为 100 像素 ; 图 1-3 导航 栏 菜单 的 初步 显示 效果 
。 边 距 : 各 边 的 内 边 距 为 5 像素 ; 
。 文本 : 居中 显示 ， 并 且 去 掉 了 文本 的 下 画 线 样式 。 
相关 代码 片段 如 下 : 
<head> 
<meta charset="utf-8"> 
<title> 导 航 栏 菜单 的 设计 与 实现 </title> 
<style> 
… (ul 和 1i 样 式 代码 略 ) 


a:link, a:visited { 











display: block; /# 设 置 为 块 级 元 素 */ 

width: 100px; /* 设 置 宽度 为 100 像 素 */ 
font-weight: bold; /* 设 置 字体 为 加 粗 */ 

color: white; /* 设 置 字体 为 白色 */ 
background-color:#5AF; /* 设 置 背 景 颜色 为 蓝 色 */ 
text-align: center; /* 设 置 文本 居中 显示 */ 
padding: Spx; /* 设 置 各 边 的 内 边 距 为 5 像素 */ 





text-decoration: none; /* 去 掉 文 本 的 下 画 线 */ 
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</style> 
</head> 


首先 对 超 链接 的 a:link 和 a:visited 进行 设置 ， 表 示 超 链接 未 访问 和 已 访问 状态 。 然 后 
将 其 display 属性 设置 为 block， 使 得 超 链 接 成 为 块 级 元 素 ， 这 样 才 可 以 为 其 设置 宽度 100 
像素 。 

此 时 页 面 效 果 如 图 1-4 所 示 。 
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图 1-4 设置 超 链接 样式 后 的 效果 图 


由 图 1-4 可 见 ， 关 于 导航 菜单 的 样式 要 求 已 初步 实现 。 下 一 节 将 介绍 如 何 为 菜单 选项 
设计 鼠标 悬浮 事件 ， 当 鼠标 悬浮 在 某 选项 上 时 该 选项 的 背景 颜色 发 生 改 变 。 


1.1.2 饼 标 事件 


在 CSS 内 部 样式 表 中 为 ahover 和 a:active 进行 样式 设置 , 表示 鼠标 悬浮 和 单 击 未 释放 
状态 时 的 样式 变化 。 相 关 代 码 片 段 如 下 : 


<head> 
<meta charset="utf-8"> 
<title> 导 航 栏 菜单 的 设计 与 实现 </title> 
<style> 
… 《ul 和 i 样式 代码 略 》 
… (a:1link 和 a:visited 代 码 略 ) 
a:hover, a:activel{ 
background-color: #006FDD; 
} 
</style> 
</head> 


上 述 代码 表示 将 鼠标 在 超 链 接 上 悬浮 和 单 击 未 释放 的 样式 更 新 成 背景 颜色 为 深蓝 色 
(十 六 进 制 码 为 #006FDD )。 

此 时 页 面 效 果 如 图 1-5 所 示 。 
由 图 1-5 可 见 ， 鼠 标 悬 浮 的 效果 已 实现 。 如 果 需 要 竖 向 排列 的 菜单 栏 ， 去 掉 <li> 元 素 
的 浮动 样式 即 可 。 至 此 导航 栏 菜单 的 设计 与 实现 已 全 部 完成 ， 用 户 可 根据 实际 需要 将 其 应 
用 到 网 站 开发 中 。 
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图 1-5 设置 鼠标 事件 后 的 效果 图 


1.1.3 完整 代码 展示 








完整 的 HIMLS 代码 如 下 : 

和 <!DOCTYPE html> 

2 <html> 

3 <head> 

4. <meta charset="utf-8"> 

5。 <tit1le> 导 航 栏 菜单 的 设计 与 实现 </tit1le> 

6 <style> 

人 ul { 

8. list-style: none;/* 用 于 去 掉 列表 的 实心 点 标记 */ 
9. margin: 07 

5405 padding: 0; 

起 } 

2 EE 

3 float: left; 

14. } 

让 a:link, a:visited { 

16. display: block; /* 设 置 为 块 级 元 素 */ 

ji width: 100px;/* 设 置 宽度 为 100 像 素 */ 

18. font-weight: bold;/* 设 置 字体 为 加 粗 */ 

Es color: white;/* 设 置 字体 为 白色 */ 

20. background-color:#5RF; /* 设 置 背 景 颜色 为 蓝 色 */ 
2 text-align: center;/* 设 置 文本 居中 显示 */ 

5 padding: 5px;/* 设 置 各 边 的 内 边 距 为 5 像素 */ 

3 text-decoration: none;/* 去 掉 文本 的 下 夯 线 */ 
24. } 

25. a:hover, a:active { 

26. background-color:red; 

Bi 

2 </style> 

29 </head> 

30. <body> 

3 <h3> 导 航 栏 菜单 的 设计 与 实现 </h3> 

和 <hr /> 

33. <! 一 -导航 栏 --> 第 
34. <nav> 1 
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35: <ul> 

36. <1i><a href="#"> 头 条 </a></1i> 
3 <1i><a href="#"> 娱 乐 </a></1i> 
38. <li><a href="#"> 热 点 </a></1i> 
39. <1i><a href="#"> 体 育 </a></1i> 
40. <1i><a href="#"> 财 经 c/a></1i> 
F <1i><a href="#"> 科 技 </a></1i> 
42. </ul> 

43. </nav> 

44. </body> 

45. </html> 








1.2 商务 风格 表格 的 设计 与 实现 


【 例 1-2】 商务 风格 表格 的 设计 与 实现 
功能 要 求 :设计 一 款 商务 风格 表格 ， 运 行 效果 如 图 1-6 所 示 。 


日 -= 


六 商务 风格 表格 的 设计 与 实 ? x 


| 《 了 C | 商务 风格 表格 的 设计 与 实现 html 9 三 
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数据 研发 工程 师 











微软 














图 1-6 商务 风格 表格 的 显示 效果 


1.2.1 创建 表格 


使 用 <table> 标 签 在 页 面 上 创建 表格 ， 并 使 用 <t> 和 <td> 标 签 为 其 添加 若干 个 单元 行 与 
单元 格 。 相 关 HIML5 代码 片段 如 下 : 




















<body> 
<h3> 商 务 风格 表格 的 设计 与 实现 </h3> 
<hr /> 


<table border="1"> 
<caption> 招 聘 信 息 表 </caption> 
<tr><th> 地 点 </th><th> 招 聘 职 位 </th><th> 公 司 </th></tr> 
<tr><td> 全 国 </td><td> 产 品 培训 生 </td><td> 腾 讯 </td></tr> 
<tr><td> 全 国 </td><td> 前 端 开 发 工程 师 </td><td> 阿 里 巴巴 </td></tr> 
































<tr><tqd> 上 海 </td><tq> 交 互 设计 师 </td><td> 网 易 游戏 </td></tr> 








<tr><td> 北 京 </td><td> 视 觉 设 计 师 </td><td>360</td></tr> 
<tr><td> 深 圳 </tdq><td> 数 据 分 析 师 </td><td>IBM</td></tr> 
<tr><td> 杭 州 </td><td> 数 据 研 发 工程 师 </td><td> 微 软 </td></tr> 
</table> 
</body> 





其 中 ，<caption> 标 签 用 于 显示 表格 的 总 标题 ，<th> 标 签 用 于 显示 表格 的 第 1 行 标题 。 
为 方便 显示 运行 效果 ， 将 <table> 标 签 临时 添加 了 行内 样式 border-"1"， 表 示 表 格 具 有 1 像 
素 的 边框 线 。 此 时 运行 效果 如 图 1-7 所 示 。 
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| 深圳] 获 据 分 析 师 。 J[IBM 
杭州 | 数据 研发 工程 师 | 微软 




























































































图 1-7 商务 风格 表格 的 显示 效果 
由 图 1-7 可 见 ， 表 格 和 相关 数据 已 创建 完成 。 下 面 介绍 如 何 为 表格 设置 样式 。 
1.2.2 样式 设计 


本 节 主 要 介绍 表格 的 样式 设计 ， 包 括 以 下 内 容 : 

。 表格 的 总 体 样式 ; 

。 单元 格 样式 ; 

。 单元 行 样式 。 

1. 表格 的 总 体 样式 

为 <table> 标 签 增加 自 定 义 id="recruit", 以 便 可 以 使 用 CSS 的 ID 选择 器 为 其 规定 样式 。 
相关 代码 片段 修改 后 如 下 : 











<body> 
<h3> 商 务 风格 表格 的 设计 与 实现 </h3> 
<hr /> 
<table id="recruit" border="1"> 
… (内 容 略 ) 
</table> 
</body> 
采用 CSS 内 部 样式 表 的 形式 在 <head> 标 签 中 为 <table> 标 签 设置 样式 ， 表格 宽度 为 | 1 


HTML+CSS 圾 矶 项 局 


HTML5 网 页 碘 带 克 计 人 笑 紫 


100%， 双 线 边 框 折 针 为 单线 效果 ， 文 本 对 齐 方 式 为 左 对 齐 。 相 关 代码 如 下 


<head> 
<meta charset="utf-8"> 
<title> 商 务 风 格 表格 的 设计 与 实现 </title> 
<style> 
/* 设 置 表格 的 总 体 样式 */ 
#recruit { 
width: 100%; 
border-collapse: collapse; 
text-align: left; 



















外 
</style> 
</head> 


运行 效果 如 图 1-8 所 示 。 
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深圳 数据 分 析 师 IBM 
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图 1-8 设置 表格 总 体 样式 的 显示 效果 


2. 单元 格 样式 
为 单元 格 标签 <td> 和 标题 单元 格 标签 < 由 > 重新 设置 样式 ， 边框 线条 为 1 像素 宽 的 橙色 
实 线 ， 并 微调 各 边 的 内 边 距 为 7 像素 。 相 关 代码 如 下 : 


<head> 
<meta charset="utf-8"> 
<title> 商 务 风 格 表格 的 设计 与 实现 </title> 
<style> 

… (表格 的 总 体 样式 代码 略 ) 

/* 设 置 单元 格 样式 */ 

#recruit td, #recruit th { 
border: lpx solid orange; 
padding: 7px; 

} 

</style> 
</head> 














为 标题 单元 格 标签 <th> 添 加 独立 样式 : 背景 颜色 为 橙色 ,字体 颜色 为 白色 。 相 关 代 码 
如 下 : 


<head> 
<meta charset="utf-8"> 
<title> 商 务 风格 表格 的 设计 与 实现 </title> 
<style> 
… (表格 总 体 样式 和 单元 格 样式 代码 略 》 
/* 设 置 标题 单元 格 样式 */ 
#recruit th { 
background-color: orange; 
Color: #FFFFFF; 





} 
</style> 
</head> 








运行 效果 如 图 1-9 所 示 。 
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图 1-9 设置 单元 格 样式 的 显示 效果 
3. 单元 行 样式 
为 奇数 行 的 单元 行 标签 <tr> 自 定义 类 名 称 class="orange", 以 便 可 以 在 CSS 内 部 样式 表 
中 使 用 类 选择 器 设置 不 同 的 背景 颜色 以 示 区 别 。 相 关 代 码 修改 后 如 下 : 








<body> 


<h3> 商 务 风 格 表格 的 设计 与 实现 </h3> 
<hr /> 


<table id="recruit" border="1"> 
<caption> 招 聘 信息 表 </caption> 
<tr><th> 地 点 </th><th> 招 聘 职 位 </th><th> 公 司 </th></tr> 


<tr><td> 全 国 </td><td> 产 品 培训 生 </td><td> 腾 讯 </td></tr> 第 
<tr class="orange"> 
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<td> 全 国 </td><td> 前 端 开 发 工程 师 </td><td> 阿 里 巴巴 </td> 
/Ens 
<tr><td> 上 海 </td><td> 交 互 设计 师 </td><td> 网 易 游戏 </td></tr> 
<tr class="orange"><td> 北 京 </td><td> 视 觉 设 计 师 </td><td>360</td> 
</tr> 
<tr><td> 深 圳 </td><td> 数 据 分 析 师 </td><td>IBM</td></tr> 
<tr class="orange"><td> 杭 州 </td><td> 数 据 研发 工程 师 </td><td> 微 软 </td> 
</tr> 

</table> 

</body> 


其 中 不 包括 标题 单元 行 ， 因 为 标题 单元 行 中 的 <th> 单 元 格 已 经 预 设 了 独立 的 样式 。 
CSS 内 部 样式 表 中 的 相关 代码 如 下 : 


<head> 
<meta charset="utf-8"> 
<tit1le> 商 务 风格 表格 的 设计 与 实现 </title> 
<style> 
…〔 其 他 样式 代码 略 ) 











/* 设 置 单元 行 样式 */ 
#recruit tr.orange{ 
background-color: #FFEDDB 


} 
</style> 
</head> 


运行 效果 如 图 1-10 所 示 。 
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图 1-10 设置 单元 行 样式 的 显示 效果 























至 此 整个 表格 的 样式 设置 已 经 全 部 完成 。 由 于 本 例 中 只 包含 了 一 个 表格 元 素 ， 因 此 在 
CSS 内 部 样式 表 中 也 可 以 直接 使 用 元 素 选择 器 进行 样式 设置 ， 效 果 完 全 相同 。 但 是 考虑 到 
未 来 使 用 的 扩展 性 ， 这 里 选择 了 ID 选择 器 的 组 合 方式 。 


























1.2.3 完整 代码 展示 
完整 的 HTMLS5 代码 如 下 : 
1. <!DOCTYPE html> 
全 = <html> 
hs 
4. sl hep 
5 <title> 商 务 风 格 表格 的 设计 与 实现 </title> 
6. <style> 
对 /* 设 置 表格 的 总 体 样式 */ 
全 。 #recruit { 
9. width: 100%; 
108 border-collapse: collapse; 
1 text-align: left; 
LE2。 } 
jy /* 设 置 单元 格 样式 */ 
EY #recruit td, #recruit th { 
15s /* font-size: lem;*/ 
看 border: lpx solid orange; 
17s padding: 7px; 
18. } 
19. /* 设 置 标题 单元 格 样式 */ 
20. #recruit th { 
5 background-color: orange; 
22 Color: #FFFFFF; 
23. } 
Se /* 设 置 单元 行 样式 */ 
二 #recruit tr.orange { 
26: background-color: #FFEDDB 
FP } 
2 </style> 
29. </head> 
2D. <body> 
Sy <h3> 商 务 风格 表格 的 设计 与 实现 </h3> 
32:， <hr /> 
33% <table id="recruit" border="1"> 
34. <caption> 
35% 招聘 信息 表 
36. </caption> 
37。 <tr> 
38. <th> 地 点 </th><th> 招 聘 职 位 </th><th> 公 司 </th> 
39。 </tr> 
40. <tr> 
41. <td> 全 国 </td><td> 产 品 培训 生 </td><td> 腾 讯 </td> 
42. </tr> 
43. <tEe cLlass= "orange"> 
44. <td> 全 国 </td><td> 前 端 开发 工程 师 </td><td> 阿 里 巴巴 </td> 
45. </tr> 
46. < 
47. <td> 上 海 </td><tq> 交 互 设计 师 </td><td> 网 易 游戏 </td> 
48. </tr> 
ES <tr class="orange"> 
50. <td> 北 京 </tdq><td> 视 觉 设 计 师 </td><tdq>360</td> 
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</tr> 
<tr> 

<td> 深 圳 </td><td> 数 据 分 析 师 </td><td>IBM</td> 
</tr> 


<tr class="orange"> 
<td> 杭 州 </td><td> 数 据 研发 工程 师 </td><td> 微 软 </td> 
</tr> 
</table> 
</body> 
</html> 








第 2 章 JavaScript 基础 项 目 





本 章 主 要 包含 两 个 基于 JavaScript 的 应 用 设计 实例 ， 一 是 电子 时 钟 的 设计 与 实现 ， 二 
是 电子 日 历 的 设计 与 实现 。 在 电子 时 钟 项 目 中 ， 主 要 难点 为 时 间 的 获取 以 及 每 秒 刷新 的 显 








示 效 果 ; 在 电子 日 历 项 目 中 ， 主 要 难点 为 当前 月 份 的 日 期 排序 显示 、 日 期 与 星期 的 对 应 以 
及 按钮 控件 实现 翻 页 效果 。 
本 章 学 习 目 标 : 


。 学 习 如 何 综合 应 用 HTML、CSS 与 JavaScript 开发 电子 时 钟 ; 
。 学 习 如 何 综合 应 用 HTML、CSS 与 JavaScript 开发 电子 日 历 。 


2.1 电子 时 钟 的 设计 与 实现 


【 例 2-1】 简单 电子 时 钟 的 设计 与 实现 
功能 要 求 ， 设 计 一 款 简单 的 电子 时 钟 ， 要 求实 现 显示 当前 的 时 分 秒 ， 并 且 可 以 每 秘 更 
新 一 次 实现 动态 效果 。 最 终 效果 如 图 2-1 所 示 。 i 


2.1.1 界面 设计 C 简 和 电子 时 四 htmil 三 


本 节 主要 介绍 电子 时 钟 的 网 页 布局 和 样式 设 | 下 人 
计 ， 使 用 了 <div> 标 签 划分 区 域 并 配合 CSS 样式 
完成 整个 页 面 设计 效果 。 11 :23 

1 整体 设计 | 

首先 直接 使 用 区 域 元 素 <div> 创 建 电 子 时 钟 
区 域 ， 并 在 页 面 上 添加 标题 、 水 平 线 。 

相关 HTMLS 代码 片段 如 下 : 








:57 





图 2-1 简单 电子 时 钟 的 效果 图 








<body> 
<!- -标题 --> 
<h3> 简 单 电子 时 钟 的 设计 与 实现 </h3> 
<! 一 -水 平 线 --> 
<hr /> 


<!-- 电 子 时 钟 区 域 --> 
<div id="clock"></div> 
</body> 
该 段 代码 为 <div> 元 素 定义 了 id="clock"， 以 便 可 以 使 用 CSS 的 ID 选择 器 进行 样式 
设置 。 
本 例 使 用 CSS 外 部 样式 表 规 定 页 面 样式 。 在 本 地 css 文件 夹 中 创建 clock.css 文件 ， 并 
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在 <head> 首 尾 标签 中 声明 对 CSS 文件 的 引用 。 相 关 HIMLS 代码 片段 如 下 : 


<head> 

<meta charset="utf-8"> 

<title> 简 单 电 子 时 钟 的 设计 与 实现 </title> 

<link rel="stylesheet" href="css/clock.css"> 
</head> 


在 CSS 文件 中 为 <div> 标 签 设置 样式 ， 具 体 样式 要 求 如 下 。 
。 尺寸 : 宽度 为 800 像素 ; 

。 字体: 字体 颜色 为 白色 ,字体 大 小 为 80 像素 ， 加 粗 显示 ; 
。 文本 : 居中 显示 ， 字 体 采用 了 默认 格式 ; 

。 边 距 ， 各 边 的 外 边 距 为 20 像素 。 

相关 CSS 代码 片段 如 下 : 











/* 电 子 时 钟 的 总 体 样式 设置 */ 
#clock { 
width: 800px; 
font-size: 80px; 


font-weight: bold; 
color: red; 
text-align: center; 
margin: 20px; 





目前 尚未 在 <div> 首 尾 标签 之 间 填 充电 子 时 钟 的 具体 内 容 , 因此 在 网 页 上 浏览 没有 完整 
的 效果 ， 需 等 待 后 续 补 充 。 

2， 时 分 秒 显示 框 的 设计 

在 id="clock" 的 <div> 元 素 内 部 添加 3 个 <div> 子 元 素 用 于 显示 时 分 秒 的 具体 数字 , 并 为 
其 分 别 设置 自 定义 id 名 称 为 h、m、s ( 取 hour、minute 和 second 的 首 字母 )。 

相关 HIMLS 代码 片段 修改 后 如 下 : 


<body> 
<!-- 标 题 --> 
<h3> 简 单 电子 时 钟 的 设计 与 实现 </h3> 
<!-- 水 平 线 --> 
<hr /> 
<!-- 电 子 时 钟 区 域 --> 
<div id="clock"> 
<div class="boxl" id="h"></div> 
<div class="boxl" id="m"></div> 
<div class="boxl" id="s"></div> 
</div> 
</body> 


该 段 代 码 为 3 个 显示 框 定义 了 相同 的 类 名 称 box1， 以 便 在 CSS 样式 表 中 可 以 使 用 类 
选择 器 为 其 设置 统一 样式 。 

在 CSS 文件 中 为 class="box1" 的 <div> 标 签 设置 统一 样式 ， 具 体 样式 要 求 如 下 。 

。 边 距 : 右 侧 外 边 距 为 10 像素 ; 


























。 尺寸; 宽 和 高 均 为 100 像素 ; 

。 文本 : 行 高 为 100 像素 ; 

。 浮动 向 左 浮动 ; 

。 边框 : 各 边 为 1 像素 宽 的 灰色 实 线 边框 。 
相关 CSS 代码 片段 如 下 : 


/* 时 分 秒 数字 区 域 的 样式 设置 */ 
sboxl { 
margin-right: 1l10px; 
width: 100px; 


height: 100px; 
line-height: 100px; 
float: left; 

border: gray lpx solid; 





在 3 个 显示 框 之 间 使 用 <div> 元 素 插 入 两 个 分 割 区 域 ， 用 于 显示 时 分 秒 数字 之 间 的 冒 
号 。 相 关 HTML5 代码 片段 修改 后 如 下 : 


<body> 
<!-- 标 题 --> 
<h3> 简 单 电子 时 钟 的 设计 与 实现 </h3> 
<!-- 水 平 线 --> 
<hr /3 
<!-- 电 子 时 钟 区 域 --> 
<div id="clock"> 
<div class="boxl" id="h"></div> 
<div class="box2">:</div> 
<div class="boxl" id="m"></div> 
<div class="box2">:</div> 
<div class="boxl" id="s"></div> 
</div> 
</body> 





该 段 代码 为 两 个 冒号 区 域 定义 了 相同 的 类 名 称 box2， 以 便 在 CSS 样式 表 中 可 以 使 用 
类 选择 器 为 其 设置 统一 样式 。 

在 CSS 文件 中 为 class="box2" 的 <div> 标 签 设置 统一 样式 ， 具 体 样式 要 求 如 下 。 

。 尺寸 :宽度 为 30 像素 ; 

。 浮动 :向 左 浮动 ; 

。 边 距 ， 右 侧 外 边 距 为 10 像素 。 

相关 CSS 代码 片段 如 下 : 





/* 冒 号 区 域 的 样式 设置 */ 


.box2 { 
width: 30px; 
float: left; 


margin-right: 10px; 第 
} 
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显示 效果 如 图 2-2 所 示 。 


癌 简单 电子 时 钟 的 设计 与 实 x 
CQ 简单 电子 时 钟 .html 





简单 电子 时 钟 的 设计 与 实现 


























图 2-2 电子 时 钟 的 样式 效果 图 


由 图 2-2 可 见 ， 电 子 时 钟 的 总 体 样式 已 初步 完成 。 由 于 尚未 获取 当前 时 间 ， 因 此 时 间 
显示 区 域 暂时 无 内 容 。 下 一 节 将 介绍 如 何 使 用 JavaScript 代码 动态 实现 时 分 秒 的 数值 显示 
效果 。 

2.1.2 时钟 动态 效果 的 实现 

本 节 将 采用 内 部 JavaScript 代码 的 形式 实现 获取 当前 时 间 并 且 每 秒 钟 更 新 一 次 数值 内 
容 的 功能 。 

首先 在 <body> 首 尾 标签 内 部 添加 <script> 区 域 ， 并 使 用 document.getElementById() 方 法 
获取 用 于 显示 时 分 秒 的 3 个 显示 框 对 象 。 相 关 HIML5 代码 如 下 : 


<script> 
// 获 取 显 示 小 时 的 区 域 框 对 象 
var hour = document .getElementById("h"); 


// 获 取 显 示 分 钟 的 区 域 框 对 象 





var minute = document .getElementById("m"); 

// 获 取 显 示 秒 的 区 域 框 对 象 

Var second = document .getElementById("s"); 
</script> 


在 JavaScript 中 创建 自 定义 函数 方法 getCurrentTime()， 用 于 获取 当前 时 间 并 显示 在 页 
面 中 。 相 关 JavaScript 代码 如 下 : 








Sr 


/ /获取 当前 时 间 

function getCurrentTime () { 
Var date = new Date(); 
Var h = date.getHours (); 


var m = date.getMinutes (); 
Var s = date.getseconds(); 
if(h < 10) 


h = "0"+h; // 以 确保 0 一 9 时 也 显示 成 两 位 数 








if (m < 10) 

mm = "0" + m;// 以 确保 0 一 9 分 钟 也 显示 成 两 位 数 
LE (5. < LO 

s = "0" + 5s;// 以 确保 0 一 9 秒 也 显示 成 两 位 数 


hour.innerHTML = h; 
minute.innerHTML = m; 
second.innerHTML = s; 
</ ee 
在 该 段 代 码 中 首先 使 用 了 JavaScript 中 的 Date 对 象 获取 当前 时 间 的 时 分 秒 具 体 数值 ， 
为 确保 每 次 均 显示 成 两 位 数 的 效果 ， 分 别 判断 当前 时 分 秒 是 否 小 于 10， 如 果 比 10 小 则 
在 前 面 加 一 个 数字 0， 然 后 将 修改 后 的 数值 使 用 innerHTML 属性 显示 到 对 应 的 时 间 显 示 
框 中 。 
将 getCurrentTime() 函 数 添 加 到 <body> 标 签 的 onload 事件 中 ， 以 确保 每 次 打开 页 面 就 
立刻 显示 当前 时 间 。 相 关 HIMLS 代码 修改 后 如 下 : 


<body onload="getCurrentTime()"> 
</body> 


最 后 在 JavaScript 代码 部 分 添加 setInterval0 方 法 ， 设 置 成 每 秒 钟 重新 调用 一 次 获取 当 
前 时 间 并 显示 在 页 面 上 的 getCurrentTime(0) 函 数 。 相 关 JavaScript 代码 如 下 : 


// 每 秒 更 新 一 次 时 间 








setInterval ("getCurrentTime()", 1000); 


其 中 ， 第 1 个 参数 表示 的 是 需要 调用 的 函数 名 称 ; 第 2 个 参数 表示 的 是 间隔 时 间 ， 其 
单位 为 毫秒 ，1000 毫秒 =1 秒 。 
运行 效果 如 图 2-3 所 示 。 
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(a) 页 面 首次 加 载 时 的 效果 (b) 时 钟 显示 的 数字 动态 变化 的 效果 
图 2-3 电子 时 钟 的 样式 效果 图 
由 图 2-3 可 见 ， 时 钟 显示 的 内 容 动态 变化 的 功能 已 实现 。 其 中 图 2-3 〈a) 显示 的 是 页 


面 首 次 加 载 时 的 效果 ， 当 前 时 间 可 以 正确 地 显示 出 来 ; 图 2-3 (b) 显示 的 是 保持 该 页 面 处 
于 打开 状态 ， 时 钟 显示 数字 的 动态 变化 效果 。 至 此 ， 电 子 时 钟 的 制作 已 全 部 完成 。 
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2.1.3 完整 代码 展示 
完整 的 HTML 代码 如 下 : 








时 <!DOCTYPE html> 

2 <html> 

3。 <head> 

4. <meta charset="utf-8"> 

5. <title> 简 单 电子 时 钟 的 设计 与 实现 </title> 

6. <link rel="stylesheet" href="css/clock.css"> 
hs </head> 

8. <body onload="getCurrentTime ()"> 

9. <!-- 标 题 --> 

10. <h3> 简 单 电子 时 钟 的 设计 与 实现 </h3> 

1 <!-- 水 平 线 --> 

2s <hr /> 

13: <!-- 电 子 时 钟 区 域 --> 

14. <div id="clock"> 

Ls <div class="boxl" id="h"></div> 

16. <div box2">:</div> 

了 < <div boxl" id="m"></div> 

18. <div box2">:</div> 

人 <div boxl" id="s"></div> 

2 </div> 

Zs <script> 

225 // 获 取 显示 小 时 的 区 域 框 对 象 

Pt 全 var hour = document .getElementById("h"); 
2 // 获 取 显 示 分 钟 的 区 域 框 对 象 

We var minute = document .getElementById("m"); 
26. // 获 取 显示 秒 的 区 域 框 对 象 

Zs var second = document .getElementById("s"); 
28. 

29。 // 获 取 当 前 时 间 

30 . function getCurrentTime ()1{ 

kr var date = new Date(); 

32. Var h = date.getHours (); 

EF var m = date.getMinutes (); 

: var s = date.getSeconds(); 

355 

36. if (h<10) h = "0"+h; // 以 确保 0 一 9 时 也 显示 成 两 位 数 
37. if (m<10) m = "0"+mz // 以 确保 0 一 9 分 钟 也 显示 成 两 位 数 
38- if(s<10) s = "0"+s7 // 以 确保 0 一 9 秒 也 显示 成 两 位 数 
9 

40. hour.innerHTML= h; 

41. minute.innerHTML = m; 

Lb second.innerHTML = s; 

43. } 

44. // 每 秒 更 新 一 次 时 间 

45。 setInterval ("getCurrentTime()", 1000); 

46. </script> 

[i </body> 

48. </html> 





完整 的 CSS 代码 如 下 : 











2.2 电子 日 历 的 设计 与 实现 


1. /* 电 子 时 钟 的 总 体 样式 设置 */ 

之 5 #clock { 

k 本 width: 800px; 

六 font-size: 80px; 

与 。 font-weight: bold; 

二 s color: red; 

2s text-align: center; 
和 margin: 20px; 

9. } 

10. /* 时 分 秒 数字 区 域 的 样式 设置 */ 
115 “sboxl * 

Ls margin-right: 10px; 
13s width: 100px; 

14. height: 100px; 

LSs line-height: 100px; 
16. float: left; 

YRs border: gray lpx solid; 
18- } 

19. /* 冒 号 区 域 的 样式 设置 */ 

20. -box2 { 

2 width: 30px; 

225 float: left; 

23 margin-right: 10px; 
24. } 

【 例 2-2】 简单 电子 日 历 的 设计 与 实现 


功能 要 求 : 设计 一 款 简单 的 电子 日 
历 , 要 求实 现 显 示 当 天 所 在 月 份 的 全 部 日 
期 , 并 且 可 以 通过 单 击 按钮 控件 切换 月 份 
的 功能 。 效 果 如 图 2-4 所 示 。 

第 1 块 区 域 是 状态 栏 , 包含 两 个 按钮 
控件 和 显示 当前 年 份 与 月 份 的 区 域 , 按钮 
控件 分 别 可 以 单 击 翻 到 上 个 月 和 下 个 月 ， 
要 求 每 次 单 击 都 能 够 往 前 或 往 后 翻 一 个 
月 ; 第 2 块 区 域 是 日 历 的 抬头 , 标记 星期 
几 ; 第 3 块 区 域 显 示 全 部 日 期 , 并 且 当 天 
的 日 期 用 红字 标记 出 来 。 


2.2.1 界面 设计 


本 节 主 要 介绍 电子 日 历 的 网 页 布局 
和 样式 设计 ， 包 括 使 用 <div> 标 签 划分 区 
域 、 使 用 <button> 标 签 制 作 “ 上 个 月 ”和 
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图 2-4 简单 电子 日 历 的 效果 图 本 
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“下 个 月 ”按钮 等 ， 配 合 CSS 样式 完成 整个 页 面 设计 效果 。 
1. 使 用 <div> 标 签 划分 区 域 
使 用 id="calendar" 的 块 级 标签 <div> 设 置 电子 日 历 的 显示 区 域 ， 并 在 此 区 域 继 续 使 用 
<div> 标 签 将 内 部 上 下 分 割 为 3 个 不 同 的 版 块 : @ 状态 栏 ， 左 右 两 边 是 “上 个 月 ”和 “下 
个 月 ” 按钮， 中 间 是 当前 的 年 份 和 月 份 显示 ; @ 日 历 最 上 面 一 行 的 星期 名 称 ， 从 周 日 到 周 
六 依次 填 入 ; @ 用 于 显示 当前 月 份 的 所 有 日 期 的 区 域 。 
相关 HTMLS 代码 片段 如 下 : 
<body> 
<h3> 简 单 电子 日 历 的 设计 与 实现 </h3> 
<hr /> 
<div id="calendar"> 


<! 一 -状态 栏 --> 
<div></div> 























<!-- 显 示 星 期 几 --> 
<div></div> 


<!-- 显 示 当 前 月 份 每 天 的 日 期 --> 
<div></div> 
</div> 
</body> 








此 时 还 需要 CSS 文件 辅助 泻 染 样式 ， 因 此 在 本 地 css 文件 夹 中 创建 calendar.css 文件 ， 
并 在 <head> 首 尾 标签 中 声明 对 CSS 文件 的 引用 。 相 关 HIMLS 代码 片段 如 下 : 
<head> 

<title> 简 单 电 子 日 历 的 设计 与 实现 </title> 

<meta charset="utf-8"> 

<link rel="stylesheet" href="css/calendar.css"> 








</head> 
在 CSS 文件 中 为 <div> 标 签 预 设 统一 样式 ， 内 容 居 中 显示 ， 上 、 下 外 边 距 10 像素 。 相 
关 CSS 代码 片段 如 下 : 






divt{ 
text-align:center; 
margin-top:10px; 
margin-bottom:10px; 







} 


在 CSS 文件 中 为 最 外 层 id="calendar" 的 <div> 标 签 预 设 样式 : 宽度 为 400 像素 , 边 距 设 
置 为 auto， 以 便 让 整体 内 容 居 中 显示 。 相 关 CSS 代码 片段 如 下 : 
#calendart{ 


width: 400px; 
margin:auto; 








} 





此 时 和 暂且 未 在 各 个 <div> 首 尾 标签 之 间 填 充 内 容 ， 因 此 在 网 页 上 浏览 还 没有 实际 效果 ， 
需 等 待 后 续 补 充 。 





2. 制作 状态 栏 

状态 栏 内 共有 3 个 元 素 : 左右 两 边 分 别 是 “上 个 月 ”和 “下 个 月 ”按钮 ， 中 间 是 当前 
的 年 份 和 月 份 显 示 ， 可 以 使 用 <button> 标 签 制作 按钮 、 使 用 <div> 标 签 制作 年 份 和 月 份 的 显 
示 牌 。 





相关 HIMLS 代码 片段 如 下 : 
<!-- 状 态 栏 --> 
<div> 










<!-- 显 示 " 上 个 月 "按钮 --> 
<button> 上 个 月 </button> 
<!-- 显 示 当 前 年 份 和 月 份 -~-> 
<div id="month"></div> 
<!-- 显 示 " 下 个 月 "按钮 --> 
<button> 下 个 月 </button> 
</div> 


由 于 当前 的 年 份 和 月 份 随 着 按钮 的 单 击 会 发 生变 化 ， 因 此 暂时 不 填 具 体 的 文字 内 容 ， 
为 该 <div> 标 签 声明 id="month"， 以 便 在 JS 文件 中 动态 生成 年 份 和 月 份 ， 该 id 名称 可 以 自 

将 按钮 和 年 份 与 月 份 显示 牌 的 宽度 比例 定 为 239%、50%、25%。 在 CSS 文件 中 为 <button> 
标签 预 设 统一 样式 ， 宽度 为 25%， 向 左 浮动 ， 高 度 为 40 像素 ， 为 id- "month" 的 <div> 标 签 
设置 样式 : 宽度 为 50%， 向 左 浮动 。 相 关 CSS 代码 片段 如 下 : 


buttont{ 
width: 25%; 
float:left; 
height:40px; 


} 


#montht{ 
width: 50%; 
float:left; 





3. 制作 显示 星期 的 横 栏 
该 区 域 中 只 有 一 行内 容 ， 分 为 7 个 小 区 域 ,分 别 显示 (星期 ) 日 、 一 、 二 、 三 、 四 、 
五 、 六 。 











相关 HTMLS5 代码 片段 如 下 : 
<!-- 显 示 星 期 几 --> 
<div> 


<div class="everyday">H</div> 
<div class="everyday">—</div> 
<div class="everyday">—</div> 
<div class="everyday"> 三 </diV> 
<div class="everyday"> 四 </div> 
<div class="everyday"> 五 </div> 














<div class="everyday"> 六 </div> 第 
</div> 
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为 每 个 小 区 域 设置 class="everyday"， 以 便 在 CSS 文件 中 规定 样式 ， 该 class 名 称 可 自 
定义 。 
在 CSS 文件 中 为 class="everyday" 的 <div> 标 签 预 设 统一 样式 : 宽度 为 14%, 向 左 浮动 ， 
以 保证 在 同一 行 显示 。 相 关 CSS 代码 片段 如 下 : 
.everyday{ 
width: 14%; 
float:left; 








} 





运行 效果 如 图 2-5 所 示 。 站 简 油 电子 日 历 的 设计 与 区 x Es 
由 图 2-5 可 见 , 目前 已 经 实现 了 按钮 与 星 | 全 S 人 简单 电子 日 历 html 
期 的 显示 ,后续 还 需要 动态 添加 当前 年 份 和 月 | 简单 电子 日 历 的 设计 与 实现 
份 显示 牌 的 内 容 以 及 当前 月 份 的 所 有 日 期。 一 二 


2.2.2 ”显示 状态 栏 中 的 年 份 和 月 份 。 四 五 


由 于 当前 的 年 份 和 月 份 随 着 按钮 的 单 击 
会 发 生变 化 ， 为 年 份 和 月 份 显示 牌 对 应 的 
<div> 标 签 添加 属性 声明 id="month"， 以 便 在 
JS 文件 中 动态 生成 年 份 和 月 份 ， 该 id 名 称 可 
以 自 定义 。 

修改 后 的 HIML5 代码 片段 如 下 : 

<!-- 显 示 当 前 年 份 和 月 份 -~-> 








图 2-5 电子 日 历 的 整体 布局 效果 图 


<div id="month"></div> 


此 时 需要 为 其 设计 JavaScript 代码 ， 以 便 动态 生成 当前 年 份 和 月 份 。 在 本 地 js 文件 夹 
中 创建 calendarjs 文件 ， 并 在 <head> 首 尾 标签 中 声明 对 该 JS 文件 的 引用 。 修 改 后 的 相关 
HTMLS5 代码 片段 如 下 : 


<head> 
<title> 简 单 电 子 日 历 的 设计 与 实现 </title> 

<meta charset="utf-8"> 

<link rel="stylesheet" href="css/calendar.css"> 
<script src="js/calendar.js"></script> 

</head> 













在 JavaScript 中 先 使 用 Date 对 象 获取 当前 的 时 间 日 期 。 相 关 JavaScript 代码 如 下 : 





Var today = new Date(); 

var year = today.getFullYear() ;// 获 取 当 前 年 份 
var month = today.-getMonth () + 1;// 获 取 当 前 月 份 
var day = today.getDate();// 获 取 当 前 日 期 





因为 月 份 是 从 0 开始 计数 的 ， 因 此 在 获取 到 之 后 还 需要 自行 加 1 才 是 正确 的 月 份 。 
使 用 自 定 义 函 数 showMonth0 动 态 更 新 状态 栏 中 显示 的 当前 年 份 和 月 份 ， 相 关 








JavaScript 代码 如 下 : 





// 显 示 日 历 标 题 中 的 当前 年 份 和 月 份 
function showMonth() { 
Var year month = year + "年 " + month + "月 "; 
document .getElementById ("month") .innerHTML = year month; 











由 于 之 前 已 经 获取 到 了 当前 的 年 份 和 月 回 -= En 
份 ， 因 此 在 showMonth0) 函 数 中 可 以 根据 id DD ee 了 Biaits x 

名 称 使 用 document.getElementById("month") | S 简单 电 了 日 历 html 三 
的 方法 定位 到 年 份 和 月 份 显示 牌 ， 然 后 使 用 “| 简单 电子 日 历 的 设计 与 实现 

innerHTML 语句 重 置 文本 内 容 ， 这 样 即 可 实 

















现 更 新 年 份 和 月 份 的 效果 。 上 人 月 2016 年 8 月 Lt 
运行 效果 如 图 2-6 所 示 。 日 ; 四 五 六 


由 图 2-6 可 见 , 目前 已 经 实现 了 对 于 当前 
年 月 的 实时 获取 。 下 一 节 将 介绍 如 何 批量 显 
示 当 前 月 份 的 所 有 日 期 。 
2.2.3 显示 当前 月 份 的 所 有 日 期 


本 节 主 要 介绍 如 何在 HTML 页 面 上 显示 
电子 日 历 当前 月 份 的 所 有 日 期 ， 包 括 3 个 间 
分 :计算 当前 月 份 的 总 天 数 、 计 算 当 前 月 份 罗 2 汪 而 大 全 于 用 的 下 从 各 八代 
的 第 一 天 是 星期 几 、 显 示 当 前 月 份 的 全 部 日 期 。 

1， 计算 当 前 月 份 的 总 天 数 

由 于 每 个 月 的 天 数 不 一 样 ， 因 此 在 显示 当前 月 份 的 全 部 日 期 之 前 需要 先 计算 一 下 当前 
月 份 的 天 数 。 先 声明 变量 allday 用 于 记录 当前 月 份 的 总 天 数 ， 然 后 使 用 自 定义 函数 countO 
进行 判断 和 更 新 所 有 allday 变量 对 应 的 天 数 。 相 关 JavaScript 代码 如 下 : 
var allday = 0;// 当 前 月 份 的 总 天 数 














// 用 于 推算 当前 月 份 一 共 多 少 大 
function count() { 
if (month != 2) { 


if ((month == 4) || (month == 6) || (month == 9) || (month == 11)){ 
allday = 30;//4、6、9、11 月 份 为 30 天 
} else { 


allday = 31;// 其 他 月 份 为 31 天 (不 包括 2 月 份 》 

} 

} else { 

// 如 果 是 2 月 份 ， 需 要 判断 当前 是 否 为 头 年 

if (((year $ 4) == 0 && (year $ 100) != 0) || (year $%$ 400) == 0) { 
allday = 29;// 半 年 的 2 月 份 是 29 天 

} else { 
allday = 28;// 非 半年 的 ?月份 是 28 天 

} 
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首先 需要 判断 表示 当前 月 份 的 变量 month 是 否 为 2 月 份 ， 因 为 2 月 份 比较 复杂 ， 根 据 
当前 是 否 为 头 年 还 分 为 28 天 和 29 天 两 种 情况 ， 其 他 月 份 的 天 数 是 固定 的 。 因 此 上 述 
JavaScript 代码 的 逻辑 思路 是 先 排除 2 月 份 这 种 特殊 情况 ， 那 么 如 果 当 前 月 份 为 4、6、9、 
11 月 份 ， 则 总 天 数 为 30 天 ， 如 果 是 除 此 以 外 的 月 份 ， 则 总 天 数 为 31 天。 如果 正巧 当前 月 
份 为 2 月 份 ， 则 需要 进一步 判断 表示 当前 年 份 的 变量 year 是 否 为 闵 年 〈 年 份 能 被 4 整除 并 
且 不 能 被 100 整除 ， 或 者 能 被 400 整除 )， 如 果 是 半年， 则 总 天 数 为 29 天 ， 和 否则 为 28 天 。 

2. 计算 当前 月 份 的 第 一 天 是 星期 几 
由 于 当前 月 份 的 所 有 天 数 需要 与 抬头 的 星期 对 齐 ， 所 以 首先 需要 推算 当前 月 份 的 第 一 
天 是 星期 几 ， 以 便 后 面 的 每 个 日 期 都 可 以 依次 对 齐 正 确 的 星期 。 在 JavaScript 中 创建 
showDate() 方 法 用 于 显示 当前 月 份 的 全 部 日 期 ， 其 相关 代码 如 下 : 

// 显 示 当 前 月 份 的 日 历 

function showDate () { 


showMonth () ; // 在 年 份 和 月 份 显示 牌 上 显示 当前 年 月 
count () ; // 计 算 当 前 月 份 的 总 天 数 














// 获 取 本 月 的 第 一 天 的 日 期 对 象 


var firstdate = new Date (Year，month - 1, 1); 


// 推 算 本 月 的 第 一 天 是 星期 几 
var xiqi = firstdate.getDay() 7 





变量 firstdate 用 于 获取 指定 年 月 日 的 Date 对 象 ， 这 里 需要 获得 当前 月 份 的 第 一 天 ， 因 
此 第 3 个 参数 直接 填 入 数字 1 表示 某 月 的 1 号。 由 于 year 和 month 是 全 局 变量 , 之 前 已 经 
获取 了 当前 的 年 份 和 月 份 ， 因 此 这 里 直接 使 用 即 可 。 但 要 注意 月 份 是 从 0 计算 的 ， 之 前 为 
了 显示 正确 已 经 对 其 进行 了 加 1 处 理 ， 这 里 需要 减 1 进行 还 原 ， 和 否则 会 获取 错误 的 日 期 。 
此 时 再 对 firstdate 对 象 使 用 getDay() 方 法 获取 对 应 的 是 星期 几 。 其 中 星期 一 到 星期 六 对 应 
的 返回 值 就 是 数字 1 一 6， 而 星期 日 对 应 的 是 数字 0。 

3. 显示 当前 月 份 的 全 部 日 期 

因为 本 例 设 计 的 电子 日 历 界面 是 从 星期 日 开始 依次 显示 一 周 的 日 期 ， 所 以 需要 计算 当 
前 月 份 的 第 一 天 是 否 为 星期 日 ， 如 果 不 是 星期 日 则 需要 在 第 一 天 前 面 补 全 星期 对 应 的 空白 
区 域 。 例 如 2016 年 7 月 1 日 是 星期 五 , 那么 从 星期 日 到 星期 五 一 共 需 要 补 全 5 个 空白 区 域 
才能 使 得 日 期 与 相应 的 星期 对 齐 。 在 showDate0 方 法 中 继续 添加 内 容 ， 相 关 JavaScript 代 
码 如 下 : 

// 显 示 当 前 月 份 的 日 历 


function showDate () { 








// 动 态 添加 HTML 元 素 
Var daterow = document .getElementById ("day"); 
daterow.innerHTML = ""; 











if (xiqi != 0) { 
for (var i = 0; i < Xiqiy i++) { 
var dayElement = document.createElement ("div"); 
dayElement .className = "everyday"; 
daterow.appendChild (dayElement); 
} 





} 


// 如 果 本 月 的 第 一 天 不 是 星期 日 ， 则 前 面 需要 用 空白 元 素 补 全 日 期 











在 上 述 代码 中 首先 使 用 变量 daterow 获取 id="day" 的 <div> 标 签 , 并 使 用 innerHTML 将 
其 内 容重 置 为 宝 。 然 后 判断 当前 月 份 的 第 一 天 是 否 为 星期 日 ， 如 果 不 是 星期 日 需要 在 前 面 
补 全 空白 区 域 。 使 用 for 循环 语句 每 次 补 全 一 天 的 空白 区 域 ， 在 循环 语句 中 首先 使 
用 createElement 方法 动态 创建 一 个 <div> 元 素 ， 然 后 为 其 添加 class="everyday" 以 保证 与 
星期 栏 的 样式 相同 ， 最 后 对 变量 daterow 使 用 appendChild 方法 将 当前 空白 区 域 添加 到 页 
面 上 。 

然后 正式 添加 本 月 的 所 有 日 期 ， 和 上 面 类 似 也 使 用 了 for 循环 语句 ， 每 次 动态 创建 一 
个 <div> 元 素 并 为 其 分 配 class="everyday"， 然 后 使 用 innerHTML 添加 一 个 日 期 文本 。 在 JS 
文件 中 变量 day 是 全 局 变量 ， 用 于 表示 当天 是 几 号 ， 因 此 可 以 判断 如 果 循 环 语句 本 次 正 是 
今天 的 日 期 ， 就 将 此 日 期 用 红色 字 标 注 突出 。 在 showDate() 方 法 中 继续 添加 内 容 ， 相 关 
JavaScript 代码 如 下 : 












































function showDate() { 


// 使 用 循环 语句 将 当前 月 份 的 所 有 日 期 显示 出 来 
for (var ] = 1; j <= allday; j++) { 
Var dayElement = document .createElement ("div"); 
dayElement .className = "everyday"; 
dayElement.innerHTML = j + ""; 


// 如 果 日 期 为 今天 ， 将 内 容 显示 为 红色 
if 0 = ay) 

dayElement .style.color = "red"; 
} 


daterow.appendChild (dayElement); 





// 显 示 当前 月 份 的 日 历 





} 





如 果 需 要 一 打开 浏览 器 就 立刻 显示 当前 月 份 的 内 容 ， 必 须 将 showDate() 方 法 添加 到 
HTML 页 面 的 <body> 标 签 的 onload 事件 中 ， 表 示 页 面 加 载 完毕 时 执行 的 JavaScript 代码 。 
相关 HTML 代码 修改 后 如 下 : 








<body onload="showDate()"> 





</body> 
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运行 效果 如 图 2-7 所 示 。 l 回 -= 酉 到 
目前 已 完成 显示 当前 月 份 的 全 部 效果 ， 接 下 [Coy 
来 还 需要 为 “上 个 月 ”和 “下 个 月 ”按钮 添加 相 
关 单 击 事件 完成 全 部 功能 的 实现 。 





简单 电子 日 历 的 设计 与 实现 


























2.2.4 按钮 控件 功能 的 实现 上 个 月 2016 年 8 月 下 个 月 
日 要 四 五 六 

本 节 将 介绍 按钮 控件 的 单 击 效果 如 何 实现 ， 1 2 3 4 5 6 

用 户 在 单 击 了 “上 个 月 ” 或 “下 个 月 ”按钮 时 要 能 | 7 ， wn 
够 翻 到 对 应 的 月 份 并 显示 当前 月 份 的 日 历 内 容 。 OO 
1， 往 前 翻 月 份 的 效果 实现 21 2 23 24 25 26 27 


在 JavaScript 中 创建 自 定义 函数 方法 28 2 30 3l 
lastMonth(), 用 于 实现 往 前 翻 一 个 月 的 效果 , 并 将 


























该 方法 添加 到 该 按钮 的 onclick 事件 中 。 相 关 ”图 2-7 显示 状态 栏 中 当前 月 份 的 全 部 日 期 
HTML 代码 修改 后 如 下 : 


<!-- 显 示 " 上 个 月 "按钮 -=-> 


<button onc1lick="1lastMonth () "> 上 个 月 </button> 


当 用 户 单 击 此 按钮 需要 查看 上 个 月 的 月 份 时 ， 最 简单 的 做 法 是 将 用 于 表示 当前 月 份 的 
变量 month 减 1。 但 需要 考虑 特殊 情况 : 1 月 份 的 上 个 月 是 上 一 年 的 12 月 份 。 所 以 若 当前 
4 变量 month 表示 的 已 经 是 1 月 份 ， 则 应 该 将 年 份 减 1 并 将 month 重 署 到 12 月 份 。 相 关 
JavaScript 代码 如 下 : 
// 显 示 上 个 月 的 日 历 


function lastMonth() { 
if (month > 1) { 








month -= 1; 
} else { 

month = 12 

year -= 1 


showDate(); 








} 


在 变量 year 和 month 的 值 更 新 之 后 需要 调用 showDate() 方 法 重新 在 页 面 上 生成 新 的 日 
历 内 容 。 用 户 每 次 单 击 “ 上 个 月 ”按钮 均 可 再 往 前 翻 一 个 月 的 内 容 。 

2. 往 后 翻 月 份 的 效果 实现 

在 JavaScript 中 创建 自 定义 函数 方法 nextMonth()， 用 于 实现 往 后 翻 一 个 月 的 效果 ， 并 
将 该 方法 添加 到 该 按钮 的 onclick 事件 中 。 相 关 HIML 代码 修改 后 如 下 : 

<! 一 -显示 "下 个 月 "按钮 --> 

<button onclick="lastMonth()"> 下 个 月 </button> 

当 用 户 单 击 此 按钮 需要 查看 下 个 月 的 月 份 时 ， 最 简单 的 做 法 是 将 用 于 表示 当前 月 份 的 
变量 month 加 1。 但 需要 考虑 特殊 情况 : 12 月 份 的 下 个 月 是 下 一 年 的 1 月份 。 所 以 车 当前 

















的 变量 month 表示 的 已 经 是 12 月 份 ， 则 应 该 将 年 份 加 1 并 将 month 重 置 到 1 月 份 。 相 关 
JavaScript 代码 如 下 : 


// 显 示 下 个 月 的 日 历 
function nextMonth() { 
if (month < 12) { 

month += 1; 


} else { 
month = 1; 
year += 1; 

} 

ShowDate (); 








同样 是 在 更 新 了 变量 year 和 month 的 值 之 后 需要 调用 showDate() 方 法 重新 在 页 面 上 生 
成 新 的 日 历 内 容 。 用 户 每 次 单 击 “ 下 个 月 ”按钮 均 可 再 往 后 翻 一 个 月 的 内 容 。 

运行 效果 如 图 2-8 所 示 。 其 中 图 2-8 (a) 是 显示 当前 月 份 的 效果 ; 图 2-8 (b》 是 单 击 
“上 个 月 ”按钮 的 效果 ; 图 2-8(c) 是 单 击 “下 个 月 ”按钮 的 效果 。 
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图 2-8 电子 日 历 中 按钮 切换 月 份 的 效果 


2.2.5 完整 代码 展示 





完整 的 HTML 代码 如 下 : 

Ls <!DOCTYPE html> 

2 <html> 

3. <head> 

Wy <title> 简 单 电 子 日 历 的 设计 与 实现 </title> 

5. <meta charset="utf-8"> 

6. <link rel="stylesheet" href="css/calendar.css"> 
Ws <script src="js/calendar.js"></script> 
调 </head> 

$3. <body onload="showDate()"> 

10: <h3> 简 单 电 子 日 历 的 设计 与 实现 </h3> 

11. <hr /> 

1 <div id="calendar"> 

人 <! 一 -状态 栏 --> 
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14. <div> 

15: <! 一 -显示 “上 个 月 ”按钮 --> 

16. <button onclick="lastMonth()"> 上 个 月 </button> 
二 <! 一 -显示 当前 年 份 和 月 份 --> 

18. <div id="month"></div> 

19: <! 一 -显示 “下 个 月 ”按钮 -> 

20. <button onclick="nextMonth () "> 下 个 月 </button> 
2 </div> 

2 

2 <! 一 -显示 星期 几 --> 

4 <div> 

25s <div class="everyday">H</div> 
26. <div class: veryday">—</div> 
27s <div class="everyday">—</div> 
28 . <div class="everyday">=</div> 
29; <div class="everyday"> 四 </div> 
30. <div class="everyday"> 五 </div> 
I <div class="everyday"> 六 </div> 
323 </div> 

33, 

34. <!-- 显 示 当 前 月 份 每 天 的 日 期 --> 

E <div id="day"></div> 

36; </div> 

ky </body> 


38. </html> 





完整 的 CSS 代码 如 下 : 





divt{ 

2 text-align:center; 
3 margin-top:10px; 
4. margin-bottom:10px; 
Ds } 

6 

7 #calendart{ 

8. width: 400px; 

9. margin:auto; 

10. } 

1 

12. buttont{ 

1 width: 25%; 

14. float:left; 

Ls height:40px; 

16. 3} 

Ts 

18. #montht{ 

和 width: 50%; 

20s float:left; 

之 和 


23. .everydayt{ 

24. width: 14%; 
Rs float:left; 
2 








完整 的 JavaScript 代码 如 下 : 


Var today = new Date(); 

Var year = today.getFullYear(); 
// 获 取 当 前 年 份 

var month = today.getMonth() + 1; 
// 获 取 当 前 月 份 

Var day = today.getDate(); 

// 获 取 当 前 日 期 

var allday = 0; 

// 当 前 月 份 的 总 天 数 


oawm 必 wh 


// 用 于 推算 当前 月 份 一 共 多 少 天 
function count () { 
if (month != 2) { 
if ((month == 4) || (month == 6) || (month == 9) || (month == 11)){ 
allday = 30; 
//4、6、9、11 月 份 为 30 天 
} else { 
allday = 31; 
// 其 他 月 份 为 31 天 不 包括 2 月 份 》 
} 
} else { 
// 如 果 是 2 月 份 需要 判断 当前 是 否 为 头 年 
if (((year $ 4) == 0 && (years100) != 0) || (year % 400) == 0){ 
allday = 29; 
// 闽 年 的 2 月 份 是 29 天 
telse 4 
allday = 28; 
// 非 羡 年 的 2 月 份 是 28 大 


// 显 示 日 历 标题 中 的 当前 年 份 和 月 份 
function showMonth () { 

var year month = year + "年 " + month + "月 "; 

document .getElementById ("month") .innerHTML = year month; 
} 


// 显 示 当 前 月 份 的 日 历 

function showDate() { 
showMonth () ; // 在 年 份 和 月 份 的 显示 牌 上 显示 当前 的 年 月 
count () ;// 计 算 当 前 月 份 的 总 天 数 


// 获 取 本 月 第 一 天 的 日 期 对 象 


var firstdate = new Date (Year，month - 1, 1); 


// 推 算 本 月 的 第 一 天 是 星期 几 


var xiqi = firstdate.getDay(); 


// 动 态 添加 HTML 元 素 
Var daterow = document .getElementByIld ("day"); 
daterow.innerHTML = ""; 





// 如 果 本 月 的 第 一 天 不 是 星期 日 ， 则 前 面 需 要 用 空白 元 素 补 全 日 期 
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if (xiqi != 0) 
for (var i 0; i < xiqi; i++) { 
Var dayElement = document.createElement ("div"); 
dayElement .className = "everyday"; 
daterow.appendChild (dayElement); 


} 


// 使 用 循环 语句 将 当前 月 份 的 所 有 日 期 显示 出 来 

for (var ] = 1; j <= allday; j++) { 
var dayElement = document.createElement ("div"); 
dayElement .className = "everyday"; 
dayElement.innerHTML = j + ""; 


// 如 果 日 期 为 今天 ， 将 内 容 显示 为 红色 

if (j == day) { 
dayElement.style.color = "red"; 

》 


daterow.appendchild (dayElement) 


// 显 示 上 个 月 的 日 历 
function lastMonth() { 
if (month > 1) { 
month -= 1; 


} else { 


showDate(); 
} 

// 显 示 下 个 月 的 日 历 
function nextMonth() { 
if (month < 12) { 
month += 1; 


} else { 


showDate(); 
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本 章 主要 包含 两 个 基于 HTMLS5 拖 放 API 的 应 用 设计 实例 ， 一 是 仿 回收 站 效果 的 设计 
与 实现 ， 二 是 图 片 相框 展示 的 设计 与 实现 。 在 仿 回收 站 项 目 中 ， 主 要 难点 为 元 素 的 拖 忠 以 
及 回收 效果 ; 在 图 片 相框 展示 项 目 中 ， 主 要 难点 为 文件 的 拖 忠 、 自 动 生成 带 有 相框 的 图 片 
以 及 显示 图 片 文件 信息 的 技术 。 

本 章 学 习 目 标 : 

。 学 习 如 何 综合 应 用 HTML5 拖 放 API、CSS 与 JavaScript 开发 仿 回 收 站 效果 ; 

。 学 习 如 何 综合 应 用 HTML5 拖 放 API、CSS 与 JavaScript 开发 图 片 相框 展示 效果 。 


3.1 仿 回收 站 效果 的 设计 与 实现 


【 例 3-1】 基于 HTMLS 拖 放 API 的 仿 回收 站 效果 的 设计 与 实现 

背景 介绍 : 在 Windows 等 操作 系统 中 均 包含 回收 站 功能 ,用户 可 以 直接 将 不 需要 的 文 
件 拖 电 并 放置 到 桌面 回收 站 图 标 上 以 实现 文件 的 删除 。 

功能 要 求 : 使 用 HTMLS5 拖 放 API 相关 技术 在 网 页 上 实现 仿 回收 站 的 类 似 效 果 。 用 户 
通过 拖 忠 可 以 将 页 面 上 的 元 素 放置 到 回收 站 中 删除 。 效 果 如 图 3-1 所 示 。 











(a) 页 面 初始 加 载 效果 (b) 拖 动 文件 2 的 过 程 《c) 文件 2 被 删除 后 的 效果 
图 3-1 仿 回收 站 效果 示意 图 


图 3-1 以 删除 文件 2 为 例 展示 了 对 文件 2 拖 动 与 删除 的 全 过 程 。 其 他 几 个 文件 的 操作 
效果 与 之 完全 相同 ， 这 里 不 再 重复 举例 。 
3.1.1 界面 设计 
本 节 主 要 介绍 仿 回收 站 效果 的 页 面 布局 , 主要 包括 文件 展示 区 域 和 回收 站 区 域 两 个 部 分 。 
1. 使 用 <div> 标 签 划 分 区 域 
可 以 使 用 <div> 标 签 区 分 两 个 不 同 的 区 域 : @ 文件 展示 区 ;， @ 回收 站 区 。 
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相关 HIMLS 代码 片段 如 下 : 





<body> 
<h3>HTML5 拖 放 API 之 回收 站 效果 </h3> 
<hr /> 
<!-- 文 件 展示 区 域 --> 
<div id="container"></div> 
<!-- 回 收 站 区 域 --> 
<div id="recycle"></div> 
</body> 











分 别 为 这 两 个 区 域 的 <div> 标 签 定义 id 名 称 为 container 和 recycle, 以 便 后 续 在 CSS 的 
ID 选择 器 中 使 用 。 

此 时 还 需要 CSS 文件 辅助 泻 染 样式 ， 因 此 在 本 地 css 文件 夹 中 创建 recycle.css 文件 ， 
并 在 <head> 首 尾 标签 中 声明 对 CSS 文件 的 引用 。 相 关 HTMLS5 代码 片段 如 下 : 





<head> 
<meta charset="utf-8"> 


<title>HTML5 拖 放 API 之 回收 站 效果 </tit1le> 
<link rel="stylesheet" href="css/recycle.css"> 
</head> 





在 CSS 文件 中 为 文件 展示 区 域 的 <div> 元 素 设置 样式 如 下 。 
。 边框 :1 像素 宽 的 实 线 边框 ; 

。 尺寸 : 宽 300 像素 、 高 250 像素 ; 

。 浮动 : 向 左 浮动 。 

相关 CSS 代码 片段 如 下 : 





/* 设 置 用 于 放置 文件 夹 的 区 域 样式 */ 
div#containert{ 
border: lpx solid; 
width: 300px; 
height: 250px; 
floats lefts 





} 





在 CSS 文件 中 为 回收 站 区 域 的 <div> 元 素 设置 样式 如 下 。 

。 尺寸 宽 200 像素 、 高 200 像素 ; 

。 浮动 : 向 左 浮动 ; 

。 文本 : 居中 对 齐 ; 

。 背景 : 使 用 图 片 背 景 ， 素 材 来 源 于 本 地 image 目录 下 的 recyclejpg 文件 ; 
。 边 距 : 各 边 的 外 边 距 为 30 像素 。 

相关 CSS 代码 片段 如 下 : 








/* 设 置 回收 站 样式 */ 
div#recycle { 
width: 200px; 
height: 200px; 
float: left; 
text-align: center; 
background: url(../image/recycle.jpg) no-repeat; 
margin: 30px; 


} 





目前 尚未 在 文件 展示 区 域内 部 添加 示例 文件 ， 等 待 接 下 来 补充 。 

2. 使 用 <div> 标 签 制作 示例 文件 

为 测试 文件 拖 电 与 回收 的 效果 ， 在 id="container" 的 <div> 元 素 内 部 继续 使 用 <div> 元 素 
添加 4 个 示例 文件 。 相 关 HTMLS5 代码 片段 修改 后 如 下 : 





<!-- 文 件 展示 区 域 --> 
<div id="container"> 
<div class="folder"> 文 件 1</div> 


<div class="folder"> 文 件 2</div> 
<div class="folder"> 文 件 3</div> 
<div class="folder"> 文 件 4</div> 
</div> 





为 这 4 个 <div> 标 签 设置 相同 的 class 名 称 folder， 以 便 在 CSS 中 使 用 类 选择 器 统一 设 


置 样式 效果 。 


在 CSS 文件 中 为 class="folder" 的 <div> 标 签 设置 统一 样式 如 下 。 


。 文本 : 
。 浮动 : 
。 边 距 : 
。 背景 : 
。 尺寸 : 


居中 对 齐 ; 

向 左 浮动 ; 

各 边 的 外 边 距 为 20 像素 ; 

使 用 图 片上 背景， 素材 来 源 于 本 地 image 目录 下 的 folderpng 文件 ; 
宽 100 像素 、 高 80 像素 ， 行 高 80 像素 。 


相关 CSS 代码 片段 如 下 : 





} 


/* 设 置 文件 夹 样式 */ 
.foldert{ 
text-align: center; 
float: left; 
margin: 20px; 
background: url(../image/folder.png) no-repeat; 
width: 100px; 
height: 80px; 
line-height: 80px; 





此 时 界面 设计 部 分 就 全 部 完成 了 ， 运 行 后 在 浏览 器 中 显示 的 效果 如 图 3-2 所 示 。 




















下 面 介绍 如 何 使 用 HTMLS5 拖 忠 API 技术 实现 文件 夹 的 拖 忠 和 删除 的 效果 。 
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图 3-2 ” 仿 回收 站 效果 的 界面 设计 完成 图 


3.1.2 文件 抱 鬼 与 回收 功能 的 实现 
1. 文件 拖 电 的 实现 














文件 拖 忠 的 实现 比较 简便 ， 为 4 个 用 于 显示 文件 夹 图 标的 <div> 元 素 添加 draggable 属 
性 并 将 属性 值 设 置 为 tue 即 可 。HTMLS5 相关 代码 片段 修改 后 如 下 : 
<!-- 文 件 展示 区 域 --> 
<div id="container"> 
<div class="folder" draggable="true"> 文 件 1</div> 





<div class="folder" draggable="true"> 文 件 2</div> 

<div class="folder" draggable="true"> 文 件 3</div> 

<div class="folder" draggable="true"> 文 件 4</div> 
</div> 





此 时 文件 拖 忠 已 经 可 以 实现 了 。 以 文件 2 为 例 ， 该 文件 被 拖 忠 的 运行 效果 如 图 3-3 所 示 。 
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图 3-3 文件 2 被 拖 忠 的 效果 图 


1 于 目前 尚未 设置 可 放置 区 域 ， 因 此 该 文件 只 可 以 被 拖 点 ， 还 无 法 放置 到 指定 
接 下 来 将 介绍 如 何 实现 设置 可 放置 区 域 。 
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2. 将 回收 站 区 域 设置 为 可 放置 区 域 

将 元 素 设置 为 可 放置 区 域 需要 添加 ondragover 事件 。 本 例 需要 将 回收 站 区 域 设置 为 可 
放置 区 域 ， 因 此 在 id="recycle" 的 <div> 元 素 中 添加 ondragover 事件 ， 并 且 设置 自 定义 名 称 
的 回调 函数 allowDrop(event)。 

HTMLS 相关 代码 片段 修改 后 如 下 : 








<!-- 回 收 站 区 域 --> 


<div id="recycle" ondragover="allowDrop (event) "></div> 





在 JavaScript 中 添加 allowDrop0 函 数 ， 并 且 使 用 preventDefault() 方 法 解禁 当前 元 素 为 
可 放置 元 素 。 相 关 JavaScript 代码 如 下 : 


//ondragover 事 件 回调 函数 


function allowDrop (ev) { 


// 解 禁 当前 元 素 为 可 放置 被 拖 忠 元 素 的 


ev.preventDefault (); 








} 


此 时 文件 拖 电 到 回收 站 区 域 上 方 时 将 被 允许 放置 。 以 文件 2 为 例 ， 该 文件 被 拖 忠 到 回 
收 站 区 域 的 运行 效果 如 图 3-4 所 示 。 
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图 3-4 文件 2 在 回收 站 区 域 可 被 放置 的 效果 图 


由 图 3-4 可 见 ， 当 文件 2 被 拖 忠 到 回收 站 区 域 上 方 时 ， 原 先 显 示 的 禁止 符号 消失 。 此 
时 鼠标 指针 恢复 正常 指针 样式 ， 表 示人 允许 在 当前 区 域 放 置 被 拖 忠 的 元 素 。 接 下 来 将 介绍 如 
何 实现 文件 拖 忠 到 回收 站 区 域 放 置 可 直接 被 删除 的 效果 。 

3. 回收 功能 的 实现 

文件 的 删除 需要 依靠 拖 忠 过 程 中 数据 的 传递 来 实现 。 解 决 方案 是 在 拖 忠 文件 时 传递 当 
前 元 素 的 id 名 称 ， 然 后 在 回收 站 区 域 放 置 元 素 时 根据 被 拖 忠 元 素 的 id 名 称 进行 元 素 的 
删除 。 

首先 为 这 4 个 用 于 展示 文件 的 <div> 元 素 分 别 设置 不 同 的 id 名 称 以 示 区 别 。 

相关 HIMLS 代码 片段 修改 后 如 下 : 3 
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<!-- 文 件 展示 区 域 --> 
<div id="container"> 
<div id="filel" class="folder" draggable="true"> 文 件 1</div> 





<div id="file2" class="folder" draggable="true"> 文 件 2</div> 
<div id="file3" class="folder" draggable="true"> 文 件 3</div> 


<div id="file4" class="folder" draggable="true"> 文 件 4</div> 
</div> 





当前 这 4 个 <div> 元 素 的 id 名 称 分 别 设置 为 filel~fle4， 开 发 者 也 可 以 根据 实际 情况 
修改 成 其 他 自 定义 id 名称。 

然后 为 这 4 个 <div> 元 素 添加 ondragstart 事件 ， 并 且 设 置 自 定义 名 称 的 回调 函数 
drag(event) 用 于 传递 被 拖 忠 元 素 的 id 名称。 相关 HIMLS 代码 片段 修改 后 如 下 : 


<!-- 文 件 展示 区 域 --> 

<div id="container"> 
<div id="filel" class="folder" draggable="true" ondragstart="drag (event) "> 
文件 1</div> 
<div id="file2" class="folder" draggable="true" ondragstart="drag event) "> 
文件 2</div> 
<div id="file3" class="folder" draggable="true" ondragstart="drag (event) "> 
文件 3</div> 
<div id="file4" class="folder" draggable="true" ondragstart="drag (event) "> 
文件 4</div> 

</div> 























在 JavaScript 中 添加 drag0 函 数 ， 并 且 使 用 DataTransfer 对 象 中 的 setData() 方 法 设置 传 
递 的 数据 为 当前 元 素 的 id 名 称 。 相 关 JavaScript 代码 如 下 : 


//ondragstart 事 件 回调 函数 
function drag(ev) { 
// 设 置 传递 的 内 容 为 被 拖 忠 元 素 的 jd 名称， 数据 类 型 为 纯 文本 类 型 
ev.dataTransfer.setData ("text/plain", ev.target.id); 
} 








为 回收 站 区 域 的 <div> 元 素 添加 ondrop 事件 ， 并 且 设 置 自 定 义 名 称 的 回调 函数 
drop(evenb 用 于 获取 被 放置 元 素 的 id 名称。 相关 HTMLS5 代码 片段 修改 后 如 下 : 











<! 一 -回收 站 区 域 --> 
<div id="recycle" ondragover="allowDrop (event)" ondrop="drop (event)"> 
</div> 








在 JavaScript 中 添加 drop0 函 数 ， 并且 使 用 DataTransfer 对 象 中 的 getData() 方 法 获取 传 
递 的 数据 ， 即 当前 被 放置 的 元 素 id 名 称 。 然 后 根据 id 名 称 获取 被 放置 的 元 素 对 象 ， 并 在 
文件 展示 区 域 使 用 removeChild0 方 法 删除 该 元 素 对 象 。 相 关 JavaScript 代码 如 下 : 


//ondrop 事 件 回调 函数 
function drop (ev) { 
// 解 禁 当前 元 素 为 可 放 交 被 拖 忠 元 素 的 区 域 
ev.preventDefault (); 
// 获 取 当 前 被 放置 的 元 素 id 名 称 
var id = ev.dataTransfer.getData ("text"); 


// 根 据 id 名 称 获取 元 素 对 象 
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var folder = document .getElementById (id) 
// 获 取 文 件 夹 区 域 并 删除 该 元 素 对 象 





document .getElementById ("container") .removeChild (folder); 





以 文件 2 为 例 ， 该 文件 被 拖 丰 到 回收 站 区 域 并 删除 的 最 终 效果 如 图 3-5 所 示 。 
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由 图 3-5 可 见 ， 此 时 在 文件 展示 区 域 只 显示 剩 下 的 3 个 文件 夹 图 标 ， 放 入 回收 站 区 域 
的 元 素 已 经 彻底 被 删除 。 至 此 仿 回 收 站 效果 的 功能 已 经 全 部 实现 。 


3.1.3 完整 代码 展示 


HTMLS5 完整 代码 如 下 : 





<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>HTML5 拖 放 API 之 回收 站 效果 </title> 


</head> 
<body> 
<h3>HTML5 拖 放 API 之 回收 站 效果 </h3> 


0 <hr /> 

村 <div id="container"> 

2 <div id="filel" class="folder" draggable="true" ondragstart= 
"drag (event) "> 


1 
2 
3 
4 
Bs 
6 <link rel="stylesheet" href="css/recycle.css"> 
7 
8 
9 
.| 
1 
LL 





3 文件 1 
14. </div> 
Ss <div id="file2" class="folder" draggable="true" ondragstart= 
"drag (event) "> 
16: 文件 2 
Ws </div> 
18. <div id="file3" class="folder" draggable="true" ondragstart= 
"drag (event) "> 
Le 交 件 3 如 
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</div> 
<div id="file4" class="folder" draggable="true" ondragstart= 
"drag (event) "> 
文件 4 
</div> 
</div> 
<div id="recycle" ondragover="allowDrop (event)" ondrop="drop 
(event) "></div> 
<script> 
//ondragstart 事 件 回 调 函 数 
function drag(ev) { 
// 设 置 传递 的 内 容 为 被 拖 忠 元 素 的 id 名 称 ， 数 据 类 型 为 纯 文本 类 型 


ev.dataTransfer.setData ("text/plain", ev.target.id); 


} 
//ondragover 事 件 回 调 函 数 


function allowDrop (ev) { 


34. // 解 禁 当前 元 素 为 可 放置 被 拖 忠 元 素 的 
35s ev.preventDefault (); 

36s } 

< //ondrop 事 件 回 调 函 数 

38 . function drop (ev) { 

S39 // 解 禁 当前 元 素 为 可 放置 被 拖 忠 元 素 的 区 
40. ev.preventDefault (); 

41. // 获 取 当 前 被 放置 的 元 素 id 名 称 

42. var id = ev.dataTransfer.getData ("text"); 

43. // 根 据 id 名 称 获取 元 素 对 象 

44. var folder = document .getElementById (id); 

45. // 获 取 文 件 夹 区 域 并 删除 该 元 素 对 象 

46. document .getElementById ("container") .removeChild (folder); 
47. 

48 . </script> 

49. </body> 

50. </html> 


CSS 完整 代码 如 下 : 














1.  /#* 设 置 用 于 放置 文件 夹 的 区 域 样式 */ 
div#containert{ 

E border: lpx solid; 

4. width: 300px; 

5。 height: 250px; 

6. float: left; 

7. + 

8. /* 设 置 文件 夹 样式 */ 

.foldert{ 

10. text-align: center; 

Ls float: left; 

Es margin: 20px; 

3: background: url(../image/folder.png) no-repeat; 
14. width: 100px; 

Ss height: 80px; 

16. line-height: 80px; 
a 

18. /* 设 置 回 收 站 样式 */ 

19. div#recycle { 








20， width: 200px; 


2 height: 200px; 

22. float: left; 

es text-align: center; 

24. background: url(../image/recycle.jpg) no-repeat; 
4 margin: 30px; 

262 1} 





3.2 图片 相框 展示 的 设计 与 实现 


【 例 3-2】 基于 HTMLS 拖 电 API 的 图 片 相框 展示 的 设计 与 实现 
背景 介绍 : 目前 市 面 上 的 一 些 修 图 工具 软件 带 有 自动 为 图 片 添 加 不 同 款式 相框 的 功 
户 可 以 选择 本 地 图 片 文件 然后 为 其 添加 相框 效果 。 

功能 要 求 : 使 用 HTMLS5 拖 放 API 相关 技术 在 网 页 上 实现 为 指定 图 片 自动 生成 图 片 相 
框 的 效果 。 用 户 通 过 拖 蝶 将 本 地 的 图 片 文件 放置 到 页 面 上 的 指定 区 域 即 可 在 页 面 上 自动 生 
成 带 有 相框 效果 的 图 片 展示 。 效 果 如 图 3-6 所 示 。 
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(a) 页 面 初始 加 载 效 果 (b) 本 地 图 片 文件 的 拖 电 (c) 自动 生成 相框 效果 
图 3-6 图 片 相框 展示 的 效果 示意 图 


将 本 地 的 图 片 文件 拖 忠 到 页 面 上 的 指定 区 域 进行 放置 ， 即 可 生成 带 有 相框 样式 的 图 片 
展示 效果 。 由 图 3-6 可 见 ， 生 成 的 最 终 效 果 还 包括 原始 图 片 的 名 称 、 类 型 、 大 小 和 修改 时 
间 等 相关 信息 。 


3.2.1 界面 设计 


本 节 主要 介绍 示例 项 目的 页 面 布局 设计 ， 主 要 包括 本 地 文件 放 团 区域 和 带 有 相框 图 片 
的 展示 区 域 两 个 部 分 。 
可 以 使 用 <div> 标 签 区 分 这 两 个 区 域 ， 相 关 HTML5 代码 片段 如 下 : 
<body> 
<h3>HTML5 拖 放 API 之 图 片 相框 效果 </h3> 


<hr /> 
<!-- 可 放置 文 件 区 --> 
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<div id="recycle"> 请 将 图 片 拖 放 至 此 处 </div> 
> 
<!-- 带 有 相框 的 图 片 展示 区 一 -> 
<div id="output"></div> 
</body> 








分 别 为 这 两 个 区 域 的 <div> 标 签 定义 id 名 称 为 recycle 和 output, 以 便 后 续 在 CSS 的 ID 
选择 器 中 使 用 。 
此 时 还 需要 CSS 文件 辅助 泻 染 样式 ， 因 此 在 本 地 css 文件 夹 中 创建 photoframe.css 文 





























件 ， 并 在 <head> 首 尾 标签 中 声明 对 CSS 文件 的 引用 。 相 关 HIMLS 代码 片段 如 下 : 











<head> 
<meta charset="utf-8"> 
<title>HTML5 拖 放 API 之 图 片 相框 效果 </title> 
<link rel="stylesheet" href="css/photoframe.css"> 
</head> 


在 CSS 文件 中 为 可 放置 区 域 的 <div> 元 素 设置 样式 如 下 。 
。 尺寸 宽 200 像素 、 高 50 像素 ; 

。 边框 :1 像素 宽 的 虚线 边框 ; 

。 文本 : 居中 对 齐 ; 

。 行 高 : 单行 高 度 为 50 像素 。 

相关 CSS 代码 片段 如 下 : 







/* 设 置 可 放置 区 域 样式 */ 
#recycle { 
width: 200px; 
height: 50px; 


border: lpx dashed; 
text-align: center; 
line-height: 50px; 





在 CSS 文件 中 为 图 片 展示 区 域 的 <div> 元 素 设 置 样式 如 下 。 
。 浮动 : 向 左 浮动 。 

。 边 距 :各 边 的 外 边 距 为 10 像素 。 

。 文本 : 居中 对 齐 。 

。 尺寸 : 宽度 为 500 像素 。 

相关 CSS 代码 片段 如 下 : 


/* 设 置 带 有 相框 的 图 片 展示 区 域 样式 */ 








#output { 
float: left; 
margin: 10px; 
text-align: center; 
width: 500px; 














此 时 界面 设计 部 分 全 部 完成 ， 运 行 后 在 浏览 器 中 显示 的 效果 如 图 3-7 所 示 。 
下 面 介 绍 如 何 使 用 HTMLS5 拖 忠 API 技术 实现 图 片 文件 的 拖 忠 与 相框 自动 生成 效果 。 
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请 将 图 片 拖 放 至 此 处 





图 3-7 图 片 相框 展示 的 界面 设计 效果 图 


3.2.2 ”相框 自动 生成 功能 的 实现 


1. 可 放置 区 域 的 实现 

将 元 素 设置 为 可 放置 区 域 需要 添加 ondragover 事 件 , 本 示例 需要 在 id="recycle" 的 <div> 
元 素 中 添加 ondragover 事件 ， 并 且 设 置 自 定 义 名 称 的 回调 函数 allowDrop(event)。 

HIML5 相关 代码 片段 修改 后 如 下 : 


<!-- 可 放置 文件 区 --> 





<div id="recycle" ondragover="allowDrop (event) "> 请 将 图 片 拖 放 至 此 处 </div> 


在 JavaScript 中 添加 allowDrop0 函 数 ， 并 且 使 用 preventDefault0 方 法 解禁 当前 元 素 为 
可 放置 元 素 。 相 关 JavaScript 代码 如 下 : 
//ondragover 事 件 回调 函数 
function allowDrop (ev) { 
// 解 禁 当前 元 素 为 可 放置 被 拖 忠 元 素 的 区 域 
ev.preventDefault (); 
} 


此 时 文件 拖 忠 到 id="recycle" 的 <div> 元 素 上 方 时 将 被 允许 放置 。 本 地 图 片 文件 被 拖 忠 
到 可 放置 区 域 的 运行 效果 如 图 3-8 所 示 。 
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接 下 来 将 介绍 如 何在 页 面 上 生成 带 有 相框 的 图 片 效 果 。 

2. 生成 带 有 相框 的 图 片 效果 

为 id="recycle" 的 <div> 元 素 添加 ondrop 事件 ， 并 且 设 置 自 定义 名 称 的 回调 函数 
fileDrop(evenb。 当 用 户 在 指定 区 域 放 置 图 片 文件 时 会 触发 fleDropO 函 数 。 

HTMLS5 相关 代码 片段 修改 后 如 下 : 

<! -可 放置 文件 区 -> 

<div id="recycle" ondragover="allowDrop (event)" ondrop="fileDrop (event)"> 


请 将 图 片 拖 放 至 此 处 
</div> 

















在 JavaScript 中 添加 fleDrop0 函 数 ， 并 且 使 用 preventDefault() 方 法 解禁 当前 元 素 为 可 
放置 元 素 。 然 后 获取 id="output" 的 <div> 元 素 对 象 ， 并 使 用 其 innerHTML 属性 清空 内 容 。 
相关 JavaScript 代码 如 下 : 


//ondrop 事 件 回调 函数 
function fileDrop(e) { 
// 解 禁 当前 元 素 为 可 放置 被 拖 忠 元 素 的 区 域 


e.preventDefault (); 


// 获 取 图 片 展示 区 域 对 象 output 
Var output = document .getElementById ("output"); 
// 将 图 片 展示 区 域 的 内 容 清空 


output .innerHTML = ""; 





用 该 方法 清空 output 对 象 的 内 容 主要 是 为 了 在 重复 放 入 图 片 文件 时 可 以 清除 上 一 次 的 
图 片 内 容 。 如 果 本 次 为 首次 放置 文件 ， 则 output 对 象 的 内 容 原 本 就 为 空 。 

在 JavaScript 的 fleDrop() 方 法 中 添加 代码 。 由 于 被 拖 放 的 文件 允许 是 一 个 或 者 多 个 ， 
因此 使 用 Datatransfer 对 象 中 的 files 属性 获取 同时 被 拖 放 的 文件 信息 。 然 后 使 用 for 循环 语 
名 遍历 每 一 个 被 放置 的 本 地 文件 。 新 增 内容 的 fleDrop0 方 法 的 代码 片段 如 下 : 





//ondrop 事 件 回调 函数 


function fileDrop(e) { 


// 获 取 从 本 地 拖 忠 放置 的 文件 对 象 数 组 files 


var files = e.dataTransfer.files; 


// 使 用 for 循 环 遍历 同时 被 拖 忠 并 放置 到 指定 区 域 的 所 有 文件 
for (var i = 0,f; f = files[i]; i++) { 

// 待 补充 代码 
} 





} 


在 JavaScript 中 使 用 document.createElement() 方 法 动态 创建 图 片 元 素 , 将 其 src 属性 设 
置 为 被 拖 放 的 本 地 图 片 文件 地 址 ， 并 分 别 设置 其 宽 330 像素 、 高 270 像素 。 新 增 内 容 的 
fileDrop0 方 法 的 代码 片段 如 下 : 


//ondrop 事 件 回调 函数 




















function fileDrop(e) { 


/7 使 用 for 循 环 遍 历 同时 被 拖 电 并 放羊 到 指定 区 域 的 所 有 文件 
for (var i = 0,f; = files[i]; i++) { 
// 创 建 带 有 相框 的 图 片 
// 获 取 当 前 图 片 文件 的 URIL 来 源 
Var imgURL = window.webkitURL.createObjectURL(f£); 
// 创 建 图 片 对 象 img 
var img = document.createElement ("img"); 
// 设 置 图 片 对 象 ijmg 的 src 属 性 为 当前 图 片 文件 的 URL 地 址 
img.setAttribute ("src", imgURL); 
// 设 置 图 片 对 象 img 的 宽度 为 330 像 素 
img.setAttribute ("width", "330"); 
// 设 置 图 片 对 象 img 的 高 度 为 270 像 素 
img.setAttribute ("height", "270"); 


// 待 补充 代码 








此 时 用 户 拖 忠 并 放置 的 每 一 张 图 片 都 将 产生 一 个 宽 330 像素 、 高 270 像素 的 <img> 
元 素 。 

接 下 来 在 for 循环 中 使 用 document.createElement() 方 法 动态 创建 <div> 元 素 ， 将 其 背景 
图 片 设置 为 相框 样式 ， 并 将 图 片 元 素 添加 到 相框 元 素 中 。 

新 增 内 容 的 fileDrop() 方 法 的 代码 片段 如 下 : 





//ondrop 事 件 回调 函数 


function fileDrop(e) { 


/7 使 用 for 循 环 遍 历 同 时 被 拖 电 并 放置 到 指定 区 域 的 所 有 文件 
for (var i = 0,f; f = files[i]; i++) { 


// 创 建 带 有 相框 的 图 片 


// 设 置 相框 对 象 photo 

Var photo = document .createElement ("div"); 

// 为 相框 对 象 添加 class="photoframe"， 以 加 载 相框 背景 图 片 
photo.setAttribute ("class", "photoframe"); 

// 将 图 片 添加 到 相框 对 象 中 

photo.appendchild (img); 


// 待 补充 代码 

} 

其 中 setAttribute("class","photoframe") 语 句 表示 为 用 于 展示 相框 的 <div> 元 素 添加 
class="photoframe" 属 性 。 该 class 名 称 可 自 定义 ， 并 且 需 要 在 CSS 文件 中 设置 相关 样式 
内 容 。 

在 CSS 文件 中 使 用 类 选择 器 为 用 于 展示 相框 的 <div> 元 素 设 置 样式 如 下 。 

。 背景 : 使 用 图 片 背景 ， 素 材 来 源 于 本 地 image 目录 下 的 photoframe.jpg 文件 。 








。 尺寸 : 宽 500 像素 ， 高 438 像素 。 第 
。 文本: 居中 对 齐 。 | 
a 
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。 浮 动 : 向 左 浮动 。 
相关 CSS 代码 片段 如 下 : 


/* 设 置 图 片 相框 效果 样式 */ 
-photoframe { 
background: url(../image/photoframe.jpg) no-repeat; 
width: 500px; 
height: 438px; 
text-align: center; 
float: left; 











比 时 图 片 尚 不 能 正常 居中 显示 。 为 了 快速 实现 图 片 在 垂直 方向 上 居中 对 齐 的 效果 ， 需 
要 在 其 后 面 添加 一 个 宽度 为 0、 高 度 为 100% 的 图 片 2。 图 片 2 不 占 空 间 位 置 ， 仅 用 于 辅助 
图 片 居 中 效果 。 

新 增 内 容 的 包 eDrop0 方 法 的 代码 片段 如 下 : 

















//ondrop 事 件 回调 函数 


function fileDrop(e) { 


/7 使 用 for 循 环 遍 历 同时 被 拖 电 并 放置 到 指定 区 域 的 所 有 文件 
for (var i = 0,f; f = files[i]; i++) { 


// 创 建 带 有 相框 的 图 片 


// 创 建 图片 对 象 img2 

var img2 = document.createElement ('img'); 
/7 设置 图 片 对 象 img2 的 class="block" 

img2 .setRAttribute ("class", "block"); 

// 将 图 片 2 也 添加 到 相框 元 素 中 

photo.appendCchild (img2); 


/ /添加 相框 和 图 片 效 果 
output .appendchild (photo); 


// 待 补充 代码 


} 








其 中 ，setAttribute("class","block") 语 句 表示 为 图 片 2 添加 class= "block" 属 性 。 该 class 
名 称 可 自 定义 ， 并 且 需 要 在 CSS 文件 中 设置 相关 样式 内 容 。 
在 CSS 文件 中 使 用 类 选择 器 为 图 片 2 设置 样式 如 下 : 








/* 设 置 图 片 2 的 样式 */ 


.block { 
width: Opx; 
height: 100%; 
上 


此 时 图 片 2 可 以 帮助 需要 显示 的 图 片 实现 垂直 居中 效果 。 运 行 效果 如 图 3-9 所 示 。 
接 下 来 将 介绍 如 何在 页 面 上 显示 图 片 文件 的 相关 信息 ， 包 括 原始 图 片 的 名 称 、 类 型 、 





大 小 和 修改 时 间 等 信息 。 
3. 显示 图 片 文件 信息 
修改 JavaScript 中 的 fileDrop( 方 法 ， 在 其 中 的 for 循环 语句 内 部 继续 添加 用 于 显示 图 
片 信息 的 相关 代码 。 文 件 的 相关 信息 均 来 源 于 files 数组 中 的 每 一 个 文件 对 象 。 
日 - -Em 
也 HTML5 扰 改 API 之 图 片 本 x 


CQ HTML5 拖 放 API 的 图 片 相框 效果 .html i 


HTML5 拖 放 API 之 图 片 相框 效果 














图 3-9 相框 自动 生成 的 效果 图 


新 增 内 容 的 fleDrop() 方 法 的 代码 片段 如 下 : 


//ondrop 事 件 回调 函数 
function fileDrop(e) { 


/7 使 用 for 循 环 遍历 同时 被 拖 电 并 放置 到 指定 区 域 的 所 有 文件 
for (var i = 0,f; f = files[i]; i++) { 


// 创 建 带 有 相框 的 图 片 


// 创 建 图 片 下 方 的 状态 信息 栏 

// 使 用 div 元 素 创建 状态 信息 栏 status 

Var status = document .createElement ('div'); 

// 获 取 当 前 文件 的 最 新 修改 日 期 

var lastModified = f.lastModifiedDate; 

// 修 改 当 前 文件 的 最 新 修改 日 期 的 描述 格式 

var lastModifiedstr = lastModified ? lastModified.toLocaleDatestring () 


+ ' "+ lastModified.toLocaleTimesString() : 'n/a'; 
// 设 置 图 片 下 方 状态 信息 栏 的 描述 内 容 
status .innerHTML = '<strong>' + f.name + '</strong> (' + (f.type || 


'n/a') + ') <br> 大 小 : ' +f.size + ' 字 节 <br> 修 改 时 间 : ' + lastModifiedstr; 





// 添 加 文件 描述 
output .appendChild (status); 
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} 


分 别 尝 试 拖 放 一 个 和 多 个 本 地 图 片 文 件 ， 其 效果 如 图 3-10 所 示 。 
日 -=m -= 
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(a) 单个 图 片 文件 的 显示 效果 (b) 多 个 图 片 文件 的 显示 效果 
图 3-10 为 单个 或 多 个 图 片 生成 相框 的 效果 图 


由 图 3-10 可 见 ,， 本 例 项 目 也 支持 本 地 图 片 文件 的 批量 拖 放 ,并 能 够 分 别 为 每 一 张 图 片 
生成 相框 效果 。 至 此 图 片 相框 展示 的 功能 已 经 全 部 实现 。 


3.2.3 完整 代码 展示 
HTML5 完整 代码 如 下 : 








1 <!DOCTYPE html> 

2 <html> 

3 <head> 

EE <meta charset="utf-8"> 

5 <title>HTML5 拖 放 API 之 图 片 相框 效果 </title> 

6 <link rel="stylesheet" href="css/photoframe.css"> 

7 </head> 

8 <body> 

9. <h3>HTML5 拖 放 API 之 图 片 相框 效果 </h3> 

10s <hr /> 

js <!-- 可 放置 文件 区 --> 

> <div id="recycle" ondragover="allowDrop (event)" ondrop="fileDrop 
(event) "> 

3 请 将 图 片 拖 放 至 此 处 

EE </div> 

45 bx /> 


16. <!-- 带 有 相框 的 图 片 展示 区 --> 





<div id="output"></div> 
<script> 
//ondragover 事 件 回 调 函 数 
function allowDrop(ev) { 
// 解 禁 当前 元 素 为 可 放置 被 拖 忠 元 素 的 区 


ev.preventDefault (); 


} 

//ondrop 事 件 回调 函数 

function fileDrop(e) { 
// 解 禁 当前 元 素 为 可 放置 被 拖 忠 元 素 的 区 


e.preventDefault (); 





// 获 取 图 片 展示 区 域 对 象 output 
Var output = document .getElementById("output"); 
// 将 图 片 展示 区 域 的 内 容 清空 


output .innerHTML = ""; 


// 获 取 从 本 地 拖 电 放 置 的 文件 对 象 数组 files 


var files = e.dataTransfer.files; 


// 使 用 for 循 环 遍历 同时 被 拖 忠 并 放置 到 指定 区 域 的 所 有 文件 
for (var i = 0,f; f = files[i]; i++) { 
// 创 建 带 有 相框 的 图 片 
// 获 取 当 前 图 片 文 件 的 URL 来 源 
Var imgURL = window.webkitURL.createObjectURL(f); 
/ /创建 图 片 对 象 img 
Var img = document.createElement ("img"); 
// 设 置 图 片 对 象 img 的 src 属 性 为 当前 图 片 文件 的 URL 地 址 
img.setAttribute ("src", imgURL); 
// 设 置 图 片 对 象 img 的 宽度 为 330 像 素 
img.setAttribute ("width", "330"); 
// 设 置 图 片 对 象 img 的 高 度 为 270 像 素 
img.setAttribute ("height", "270"); 


// 设 置 相框 对 象 photo 


Var photo = document .createElement ("div"); 


// 为 相框 对 象 添加 class="photoframe"， 以 加 载 相框 背景 图 片 


photo.setAttribute ("class"，"photoframe") 7 


// 将 图 片 添加 到 相框 对 象 中 
photo.appendchild (img); 


/ /创建 图 片 对 象 img2 

var img2 = document.createElement ("img"); 
// 设 置 图 片 对 象 img2 的 class="block" 
img2.setAttribute ("class", "block"); 

// 将 图 片 2 也 添加 到 相框 元 素 中 
photo.appendChild (img2); 


// 添 加 相框 和 图 片 效 果 
output .appendCchild(Pphoto) ; 


// 创 建 图 片 下 方 的 状态 信息 栏 
// 使 用 div 元 素 创建 状态 信息 栏 status 
Var status = document .createElement ("div"); 


// 获 取 当 前 文件 的 最 新 修改 日 期 
Var lastModified = f.lastModifiedDate; 
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// 修 改 当 前 文件 的 最 新 修改 日 期 的 描述 格式 
var lastModifiedstr = lastModified ? lastModified. 
toLocaleDatestring() + ' ' + lastModified.toLocale 
Timestring() : 'n/a'; 
// 设 置 图 片 下 方 状态 信息 栏 的 描述 内 容 
status .innerHTML = '<strong>' + f.name + '</strong> 
("+ (f.type || "n/a') + ')<pr> 大 小 : ' + f.size + 
" 字 节 <br> 修 改 时 间 : ' + lastModifiedstr; 
Ts 
78. // 添 加 文件 描述 
Ss output .appendChild (status); 
80. } 
81s } 
32 </script> 
83. </body> 
84. </html> 





完整 的 CSS 文件 代码 如 下 : 
/* 设 置 可 放置 区 域 样式 */ 


#recycle { 
width: 200px; 
height: 50px; 
border: lpx dashed; 
text-align: center; 
line-height: 50px; 
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} 
9. /* 设 置 图 片 相框 效果 样式 */ 
10. .photoframe { 


3 background: url(../image/photoframe.jpg) no-repeat; 
22 width: 500px; 

135 height: 438px; 

14. text-align: center; 

二 float: left; 

6 下 

17. /* 设 置 图 片 在 和 敢 直方 向 上 居中 显示 */ 

18. img { 

19. vertical-align: middle; 

20%, 虹 


21. /* 设 置 图 片 2 的 样式 */ 
22 block { 


23. width: Opx; 
24. height: 100%; 
2 :并 


26. /* 设 置 带 有 相框 的 图 片 展 示 区 域 样式 */ 
27. #output { 


28, float: left; 
29;, margin: 10px; 
30. text-align: center; 
31: width: 500px; 
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本 章 主要 包含 两 个 基于 HTMLS 表单 API 的 应 用 设计 实例 ， 一 是 用 户 注册 页 面 的 设计 
与 实现 ， 二 是 问卷 调查 页 面 的 设计 与 实现 。 在 用 户 注册 页 面 设 计 项 目 中 ， 主 要 难点 为 表单 
的 布局 以 及 提示 与 验证 功能 ， 在 问卷 调查 页 面 设计 项 目 中 ， 主 要 难点 为 表单 设计 、 使 用 
<inpu 忆 标签 自 带 的 属性 实现 验证 功能 ， 以 及 使 用 JavaScript 自 定义 函数 实现 验证 功能 。 

本 章 学 习 目 标 : 

。 学 习 如 何 综合 应 用 HTMLS5 表单 API、CSS 与 JavaScript 开发 用 户 注册 页 面 ; 

。 学 习 如 何 综 合 应 用 HTML5 表单 API、CSS 与 JavaScript 开发 问卷 调查 页 面 。 


4.1 ”用户 注册 页 面 的 设计 与 实现 


【 例 4-1】 基于 HTMLS5 表单 技术 制作 用 户 注册 页 面 
功能 介绍 : 使 用 HTMLS5 表单 技术 实现 用 户 注 册页 面 ， 要 求 用 户 可 以 输入 用 户 名 、 密 
码 、 真 实 姓 名 和 电子 邮箱 等 信息 进行 注册 。 
险 证 要 求 : 每 个 输入 栏目 的 文本 框 均 需 要 显示 提示 信息 。 用 户 在 单 击 按钮 提交 注册 信 
息 时 可 以 验证 所 有 栏目 均 为 必 填 项 以 及 电子 邮箱 的 有 效 性 。 
运行 的 最 终 效果 如 图 4-1 所 示 。 
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图 4-1 HTMLS5 用 户 注册 页 面 的 最 终 效果 图 
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4.1.1 界面 设计 


本 节 主 要 介绍 用 户 注册 页 面 的 布局 设计 。 
首先 直接 使 用 一 个 区 域 元 素 <div> 在 页 面 背景 上 创建 用 户 注册 页 面 ， 在 其 内 部 添加 标 
题 、 水 平 线 并 预 留 表单 空间 。 相 关 HTMLS5 代码 片段 如 下 : 













<body> 
<div id="container"> 
<!-- 页 面 标题 --> 
<h1> 用 户 注册 页 面 </h1> 
<!-- 水 平 线 --> 
<hr /> 
<!-- 表 单 --> 
</div> 
</body> 


该 段 代 码 为 <div> 元 素 定义 了 id="container", 以 便 可 以 使 用 CSS 的 ID 选择 器 进行 样式 
设置 。 

本 例 使 用 CSS 外 部 样式 表 规 定 页 面 样式 。 在 本 地 css 文件 夹 中 创建 reg.css 文件 ， 并 在 
<head> 首 尾 标签 中 声明 对 CSS 文件 的 引用 。 相 关 HIMLS 代码 片段 如 下 : 


<head> 
<meta charset="utf-8" > 
<title>HTML5 用 户 注册 页 面 示例 </title> 


<link rel="stylesheet" href="css/reg.css"> 
</head> 





在 CSS 文件 中 为 <div> 标 签 设置 样式 ， 具 体 样 式 要 求 如 下 。 
。 颜 色 ， 背 景 颜色 为 白色 ， 字 体 颜色 为 蓝 色 ， 
。 尺寸 ; 宽度 为 600 像素 ; 
。 边 距 : 各 边 的 内 边 距 为 15 像素 ， 上 外 边 距 为 100 像素 ， 下 外 边 距 为 0 像素 ， 左 、 
右 外 边 距 定义 为 auto， 以 便 可 以 居中 显示 ; 
。 文本 : 居中 显示 ， 字 体 采用 了 微软 雅 黑 Light 的 格式 ; 
。 特殊 ; 使 用 了 CSS3 技术 为 其 定义 边框 阴影 效果 ， 在 其 右 下 角 有 黑色 投影 。 
相关 CSS 代码 片段 如 下 : 
/* 注 册 面 板 样式 */ 
#container{ 
background-color:white; 
Color:#2289F0; 
padding:15px; 
margin: 100px auto 0px; /* 上 边 距 100px; 左 、 右 为 auto; 下 边 距 0px*/ 
width:600px; 
text-align:center; 
font-family:" 微 软 雅 黑 Light"; 
box-shadow: lO0px lO0px l5px black; 











其 中 , box-shadow 属性 可 以 实现 边框 投影 效果 , 4 个 参数 分 别 代表 水 平方 向 的 偏 移 (向 
右 偏 移 10 像素 )、 垂 直方 向 的 偏 移 〈 向 下 偏 移 10 像素 )、 阴 影 宽度 15 像素 ) 和 阴影 颜色 
(黑色 )， 均 可 自 定义 成 其 他 值 。 该 属性 属于 CSS3 新 特性 中 的 一 种 ， 在 这 里 仅 为 美化 页 面 
做 简单 使 用 。 

在 CSS 文件 中 为 水 平 线 标签 <hr> 做 简单 样式 修改 : 设置 水 平 线 为 80% 的 宽度 , 线条 为 
1 像素 的 蓝 色 实 线 ， 底 端 外 边 距 为 15 像素 。 
相关 CSS 代码 片段 如 下 : 
ET 
hr{ 

width:80%; 

border:#2289F0 lpx solid; 

margin-bottom:15px; 































} 
由 于 网 页 背景 颜色 默认 为 白色 ,与 <div> 元 素 设置 的 背景 颜色 相同 , 为 了 区 分 ,将 网 页 
的 背景 颜色 设置 为 浅 灰色 。 
相关 CSS 代码 片段 如 下 : 


body { 
background-color:#CCCCCC; /* 设 置 页 面 背景 闫 色 为 浅 灰 色 */ 


} 


此 时 页 面 效 果 如 图 4-2 所 示 。 
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图 4-2 HIML5 用 户 注册 页 面 的 效果 图 





由 图 4-2 可 见 ， 关 于 <div> 标 签 的 样式 要 求 已 初步 实现 。 目 前 尚未 在 <div> 首 尾 标签 之 
间 填 充 表单 的 相关 内 容 ， 因 此 在 网 页 上 浏览 没有 完整 效果 ， 需 等 待 后 续 补充 。 下 面 介绍 如 
何 创建 表单 。 

4.1.2 表单 设计 


本 节 主 要 介绍 如 何在 页 面 上 创建 完整 表单 ， 包 括 用 户 注册 时 需要 填写 的 各 类 输入 框 和 
提交 按钮 。 
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首先 在 <div> 元 素 的 预 留 区 域 添加 一 个 表单 元 素 <form>。 相 关 HIMLS 代码 片段 如 下 : 


<body> 
<div id="container"> 
<! 一 -页 面 标题 --> 
<h1> 用 户 注 册页 面 </h1> 
<! 一 水平线--> 
<hr /> 
<!-- 表 单 --> 
<form method="post" action="URL"> 
</form> 
</div> 
</body> 


其 中 ，<form> 首 标签 中 的 method 属性 用 于 定义 提交 数据 使 用 POST 方法 ，action 属性 
用 于 定义 提交 给 服务 器 的 地 址 ， 这 里 根据 实际 情况 改 成 真实 的 服务 器 地 址 即 可 。 

在 表单 中 使 用 <input> 标 签 制作 文本 输入 框 ， 并 将 其 嵌 套 在 <label> 元 素 的 首尾 标签 内 ， 
以 便 单 击 标签 上 的 文字 内 容 即 可 让 输入 框 获得 焦点 。 相 关 HTMLS5 代码 片段 如 下 : 


<form method="post" action="URL"> 
<label> 用 户 名 : 
<input type="text" name="username" /> 
</label> 
<br /> 
label> 密 ” 码 : 
<input type="password" name="pwd" /> 
</label> 
<br /> 
<label> 确 认 : 
<input type="password" name="pwd2" /> 
</label> 
<br /> 
<label> 姓 名 : 
<input type="text" name="name" /> 
</label> 
<br /> 
<label> 邮 箱 : 
<input type="email" name="email" /> 
</label> 
</form> 


其 中 ,“ 用 户 名 ”和 “姓名 ”使 用 的 是 text 类 型 ， 表 示 普 通 单行 文本 框 ;“ 密 码 ” 与 “ 确 
认 ” 使 用 的 是 password 类 型 ,表示 密码 框 ( 与 单行 文本 框 样式 相同 ， 文 本 内 容 会 被 手 码 ); 
“邮箱 ”使 用 的 是 email 类 型 。 

在 CSS 文件 中 为 所 有 输入 标签 <input> 进 行 统一 样式 设置 。 

。 尺寸 : 宽度 为 180 像素 、 高 度 为 20 像素 。 

。 边 距 : 各 边 的 外 边 距 为 5 像素 。 

。 字体 : 字体 大 小 为 16 像素 ， 字 体 采 用 了 微软 雅 黑 Light 的 格式 。 

相关 CSS 代码 片段 如 下 : 



























































/* 输 入 表单 样式 */ 
input{ 
width:180px; 
height:20px; 
margin:S5px; 
font-size:16px; 
font-family:" 微 软 雅 黑 Light"; 


在 输入 域 下 方 添加 按钮 ， 这 里 使 用 了 <button> 标 签 以 便 可 以 自 定义 按钮 上 的 文本 及 背 
景 颜 色 等 内 容 。 相 关 HIMLS 代码 片段 如 下 : 


<form method="post" action="URL"> 
… 《前 面 的 <input> 相 关 代 码 省 略 》 
<br /> 
<button type="submit"> 
提交 注册 


</button> 











</form> 





其 中 <button> 标 签 的 类 型 为 submit， 表 示 其 为 提交 按钮 ， 当 用 户 单 击 该 按钮 时 可 以 向 
服务 器 提交 表单 数据 。 

在 CSS 文件 中 为 按钮 标签 <button> 进 行 样式 设置 。 

。 尺寸 : 宽度 为 120 像素 、 高 度 为 40 像素 。 

。 颜色 : 背景 颜色 为 蓝 色 ， 字 体 颜色 为 白色 。 

。 边框: 0 像素 (无 边框 效果 )。 

。 边 距 : 各 边 的 外 边 距 为 10 像素 。 





。 字体 : 字体 大 小 为 18 像素 、 加 粗 显 示 ， 字 体 采 用 了 微软 雅 黑 Light 的 格式 。 
相关 CSS 代码 片段 如 下 : 


/* 按 钮 样式 */ 

buttont{ 
width:120px; 
height:40px; 
background-color:#2289F0; 
border:0px; 


color: white; 

margin:10px; 

font-size:18px; 

font-family: "微软 雅 黑 Light"; 
font-weight:bold; 





还 可 以 为 <button> 标 签 设置 鼠标 悬浮 时 的 样式 效果 ， 在 CSS 样式 表 中 用 button:hover 
表示 。 本 例 将 该 效果 设置 为 按钮 背景 颜色 的 改变 ， 换 成 颜色 加 深 的 蓝 色 。 

相关 CSS 代码 片段 如 下 : 

/* 鼠 标 悬 浮 时 按钮 的 样式 */ 


button:hovert{ 第 
background-color:#0068D0; 








} 


性 
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此 时 整个 样式 设计 就 全 部 完成 了 ， 其 页 面 效 果 如 图 4-3 所 示 。 
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图 4-3 HIML5 用 户 注册 页 面 的 效果 图 


由 图 4-3 可 见 ， 关 于 用 户 注册 页 面 的 布局 和 样式 要 求 已 初步 实现 。 目 前 尚未 为 表单 元 
素 添加 提示 与 验证 功能 ， 该 内 容 将 在 下 一 节 介 绍 。 


4.1.3 提示 与 验证 功能 的 实现 


本 节 主 要 介绍 如 何 实现 HIML 表单 的 提示 与 验证 功能 ， 包 括 以 下 内 容 : 
。 为 所 有 输入 框 添加 提示 语句 ; 
。 为 所 有 输入 框 添加 非 空 验证 ; 
。 为 电子 邮箱 进行 有 效 性 验证 ; 
。 为 输入 内 容 进行 记忆 及 下 次 输入 时 自动 补 全 。 
1. 使 用 <input> 标 签 的 placeholder 属性 实现 提示 效果 
为 每 一 个 <inpuf> 标 签 添加 HIMLS 表单 新 增 的 placeholder 属性 , 在 属性 值 中 填写 需要 
提示 的 内 容 。 相 关 HTMLS5 代码 片段 修改 后 如 下 : 
<form method="post" action="URL"> 
<labe1> 用 户 名 : 
<input type="text" Placeholder=" 请 输入 用 户 名 " name="username" /> 
</label> 
<br /> 
<label> 密 ” 码 : 


<input type="password" placeholder=" 请 输入 密码 " name="pwd" /> 
</label> 


























<br /> 
<label> 确 认 : 
<input type="password" placeholder=" 请 再 次 输入 密码 " name="pwd" /> 
</label> 
<br /> 
<label> 姓 名 : 
<input type="text" Placeholder=" 请 输入 真实 姓名 " name="name" /> 
</label> 
<br /> 
<label> 邮 箱 : 
<input type="email" placeholder=" 请 输入 电子 邮箱 " name="email" /> 
</label> 
<br /> 
<button type="submit"> 
提交 注册 
</button> 
</form> 








此 时 页 面 效果 如 图 4-4 所 示 。 


由 HTML5 用 户 注册 页 面 示例 x 
QQ 用 户 注册 页 面 .html 三 














图 4-4 HTMLS5 用 户 注册 页 面 增加 提示 语句 








图 4-4 可 见 ， 在 每 个 输入 框 内 均 可 以 显示 提示 语句 。 当 输入 框 获取 焦点 时 该 提示 语 
句 会 自动 消失 ， 不 影响 用 户 的 正常 输入 。 

2. 使 用 <input> 标 签 的 required 属性 实现 非 空 验证 

为 每 一 个 <input> 标 签 添加 HIMLS 表单 新 增 的 required 属性 以 实现 非 空 验证 ， 可 以 
写成 完整 版 required="required"， 也 可 以 简写 为 required。 相 关 HIML5 代码 片段 修改 后 
如 下 : 


<form method="post" action="URL"> 
<label> 用 户 名 : 
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<input type="text" placeholder=" 请 输入 用 户 名 " name="username" required /> 
</label> 
<br /> 
<label> 密 ” 码 : 
<input type="password" placeholder=" 请 输入 密码 " name="pwd" required /> 
</label> 
<br /> 
<label> 确 认 : 
<input type="password" placeholder=" 请 再 次 输入 密码 " name="pwd" required /> 
</label> 
bre. /> 
<label> 姓 名 : 
<input type="text" placeholder=" 请 输入 真实 姓名 " name="name" required /> 
</label> 
<br /> 
<label> 邮 箱 : 
<input type="email" placeholder=" 请 输入 电子 邮箱 " name="email" required /> 
</label> 
<br /> 
<button type="submit"> 
提交 注册 
</button> 
</form> 


此 时 为 了 测试 效果 故意 将 用 户 名 输入 框 保持 空白 并 单 击 “提交 注册 ”按钮 。 
运行 效果 如 图 4-5 所 示 。 
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用 户 注册 页 面 








图 4-5 HTMLS5 用 户 注册 页 面 的 非 空 验证 





由 图 4-5 可 见 ，<input> 标 签 的 required 属性 生效 ， 该 属性 可 以 自动 为 输入 框 进行 非 空 
验证 ， 当 用 户 没有 输入 任何 内 容 时 会 终止 表单 数据 的 提交 并 弹出 提示 。 























3. 使 用 <input> 标 签 的 email 类 型 实现 电子 邮箱 验证 

<input> 标 签 的 email 类 型 自 带 邮箱 验证 功能 ， 如 果 用 户 曾 经 使 用 text 类 型 制作 电子 邮 
箱 输入 框 ， 在 这 里 改 为 email 即 可 。 相 关 HIMLS 代码 片段 如 下 : 

<label> 邮 箱 : 

<input type="email" name="email" /> 

</label> 

为 了 测试 效果 在 邮箱 栏目 填 入 一 个 错误 内 容 ， 没 有 带电 子 邮箱 的 特有 符号 “@”。 

运行 效果 如 图 4-6 所 示 。 
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用 户 注 册页 面 





admin 





确 认 : | 


姓 名 : 测试 员 


邮 箱 : [abd 


四 请 在 电子 邮件 地 址 中 包 
括 "@"。“abc" 中 缺少 "@”。 








图 4-6 HIML5 用 户 注册 页 面 的 邮箱 验证 


由 图 4-6 可 见 ，<input> 标 签 的 email 类 型 生效 ， 该 属性 可 以 自动 为 输入 框 进行 邮箱 格 
式 验证 ， 当 用 户 输 入 的 内 容 没有 包含 “@” 符 号 时 会 终止 表单 数据 的 提交 并 弹出 提示 。 

4. 使 用 <form> 标 签 的 autocomplete 属性 实现 内 容 的 自动 记忆 补 全 

为 <form> 标 签 添加 HIMLS 表单 新 增 的 autocomplete 属性 以 实现 自动 记忆 补 全 功能 ， 
用 户 如 果 上 一 次 提交 过 数据 ， 则 在 重新 打开 填写 时 会 在 文本 框 下 方 展开 历史 提示 选项 。 

相关 HTMLS5 代码 片段 修改 后 如 下 : 

<form method="post" action="URL" autocomplete="on"> 

…〔 内 容 省 上 略 ) 

</form> 

此 时 autocomplete 属性 值 on 表示 开启 自动 记忆 补 全 功能 ， 如 果 改 为 o 企 则 表示 关闭 该 
功能 。 为 了 测试 效果 ， 重 新 打开 该 页 面 输入 用 户 名 。 




















运行 效果 如 图 4-7 所 示 。 
由 图 4.7 可 见 ，<form> 标 签 的 autocomplete 属性 生效 ， 该 属性 可 以 自动 展开 之 前 的 输 | 第 
入 内 容 作为 提示 选项 。 至 此 本 例题 已 全 部 完成 。 a 
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四 HTML5 用 户 注册 页 面 示例 x 
CQ 用 户 注册 页 面 .html 和 二 

















图 4-7 HTML5 用 户 注册 页 面 输入 内 容 的 自动 补 全 


4.1.4 完整 代码 展示 


HTMLS5 完整 代码 如 下 : 








下 <!DOCTYPE html> 

2 <html> 

3 <head> 

要 <meta charset="utf-8" > 

Si <title>HTML5 用 户 注册 页 面 示例 </title> 

6 <link rel="stylesheet" href="css/reg.css"> 

7 </head> 

8 <body> 

号。 <div id="container"> 

10 . <!-- 页 面 标题 --> 

La <h1> 用 户 注册 页 面 </h1> 

Las <!-- 水 平 线 --> 

3 > 

14. <!-- 表 单 --> 

Ls <form method="post" action="URL" autocomplete="on"> 

16. <labe1> 用 户 名 : 

Ts <input type="text" placeholder=" 请 输入 用 户 名 " name= 
"username" required /> 

18 </label> 

19. <br /> 

20. <label> 密 ” 码 : 

2 <input type="password" placeholder=" 请 输入 密码 " name= 
"pwd" required /> 

2 </label> 

2 <br /> 

EZ 罗 <label> 确 认 : 


网 <input type="password"” placeholder=" 请 再 次 输入 密码 " 





name="pwd" required /> 
</label> 
27. <br /> 
<label> 姓 ”名 : 
29. <input type="text" placeholder=" 请 输入 真实 姓名 " name= 
"name" required /> 
0 </label> 
3 <br /> 
ey <label> 邮 箱 : 
F< 光 <input type="email" placeholder=" 请 输入 电子 邮箱 " name= 
"email" required /> 
34. </label> 
35; <br /> 
36. <button type="submit"> 
3 提交 注册 
38 . </button> 
39。 </form> 
40. </div> 
41. </body> 
42. </html> 


CSS 文件 reg.css 的 完整 代码 如 下 : 








body { 
background-color:#CCCCCC; /* 设 置 页 面 背景 颜色 为 浅 灰色 */ 
} 


理 
3 

4. 

5. /#* 注 册 面 板 样式 */ 
6 

7 

8 

9 


#containert{ 
background-color:white; 
Color:#2289F0; 
和 padding:15px; 
i: margin: 100px auto 0px; /* 上 边 距 为 100 像 素 ， 左 右 为 auto; 下 边 距 为 0 像素 */ 
Rs width:600px; 
1 text-align:center; 
Lo font-family: "微软 雅 黑 Light"; 
14. box-shadow: 10pPx 10pPx 1l5px black; 
二 53， 生 
6s 
17. /* 水 平 线 样式 */ 
18. hrf{ 
Ls width:80%; 
2 border:#2289F0 lpx solid; 
2 margin-bottom:15px; 
2 二 
2 


24. /* 输 入 表单 样式 */ 
25. inputt{ 





> width:180px; 

2 height:20px; 

28. margin:S5px; 

29s font-size:16px; 

30. font-family: "微软 雅 黑 Light"; 

3 3 

32. 

33. /* 按 钮 样式 */ 
34. buttont{ 4 
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ns width:120px; 

36. height:40px; 

Is background-color:#2289F0; 
38。 border:0px; 

39. color: white; 

40. margin:10px; 

a font-size:18px; 

42. font-family: "微软 雅 黑 Light"; 
43. font-weight:bold; 

44. 上】 

45. 

46. /* 和 鼠标 巧 浮 时 按钮 的 样式 */ 

47. button:hover{ 

48. background-color:#0068D0; 
Li ， 








4.2 问卷 调查 页 面 的 设计 与 实现 


【 例 4-2】 基于 HTMLS5 表单 技术 制作 问卷 调查 页 面 

主题 介绍 : 随 着 移动 终端 的 普及 ， 手 机 移动 支付 业务 成 为 现在 市 场 支付 手段 的 发 展 趋 
势 。 本 例 以 手机 移动 支付 业务 为 例 ,使 用 HIMLS 表单 技术 实现 相关 业务 的 问卷 调查 页 面 。 

功能 要 求 : 要 求 用 户 可 以 根据 调查 问题 进行 单 选 、 多 选 以 及 在 结尾 处 填写 姓名 、 职 位 
和 联系 电话 等 信息 。 每 个 输入 栏目 的 文本 框 均 需 要 显示 提示 信息 。 用 户 在 单 击 按钮 提交 注 
册 信 息 时 可 以 验证 所 有 栏目 均 为 必 填 项 以 及 电子 邮箱 的 有 效 性 。 

运行 的 最 终 效 果 如 图 4-8 所 示 。 

回 - -En 


凸 HTML5 问 郑 调 查 页 面 示例 x 
CQ 问卷 调查 页 面 .html 


手机 移动 支付 业务 问卷 调查 
1 您 的 教育 程度 是 了 
高 中 8 大 专 9 本 科 9 硕士 研究 生 9 博士 及 以 上 
2. 您 的 年 的 段 是 ? 


18 岁 以 下 日 18-25 岁 © 26-30 岁 © 31-35 岁 © 35 岁 以 上 
3. 您 是 否 使 用 过 手机 移动 支付 业务 ? 

从 未 听 说 过 9 听 说 过 ,但 未 使 用 过 $ 偶尔 使 用 9 经 常 使 用 
4 您 了 解 以 下 哪些 手机 移动 支付 业务 ? ( 可 多 选 ) 

支付 宝 日 微 信 支 付 忆 电信 各 支付 日 Apple Pay 日 以 上 均 不 了 解 
5. 您 看 二 以 下 哪些 支付 功能 ? ( 可 多 选 ) 

话机 /游戏 币 充值 

刷 手机 加 油 

刷 手机 购物 

剧 手 机 挟 内 公交 / 径 执 /地铁 

水 电焊 /有 线 电视 /宽带 远程 缴 要 

享受 联盟 商户 的 优惠 折扣 

以 上 均 不 感 兴趣 


您 的 姓名 您 的 职业 联系 电话 











图 4-8 HTML5 问卷 调查 页 面 的 最 终 效 果 图 


4.2.1 界面 设计 


本 节 主 要 介绍 问卷 调查 页 面 的 布局 设计 。 
首先 直接 使 用 一 个 区 域 元 素 <div> 在 页 面 背景 上 创建 问卷 调查 页 面 ， 在 其 内 部 添加 标 
题 、 水 平 线 并 预 留 表单 空间 。 相 关 HTMLS5 代码 片段 如 下 : 








<body> 
<div id="questionnaire"> 
<! 一 -页 面 标题 --> 
<h1> 手 机 移动 支付 业务 问卷 调查 </h1> 
<! 一 -水 平 线 --> 
<hr /> 
<!-- 表 单 --> 
</div> 
</body> 










该 段 代 码 为 <div> 元 素 定义 了 id="questionnaire"， 以 便 可 以 使 用 CSS 的 ID 选择 器 进行 
样式 设置 。 

本 例 使 用 CSS 外 部 样式 表 规 定 页 面 样式 。 在 本 地 css 文件 夹 中 创建 questionnaire.css 
文件 ， 并 在 <head> 首 尾 标签 中 声明 对 CSS 文件 的 引用 。 相 关 HIML5 代码 片段 如 下 : 


<head> 
<meta charset="utf-8" > 


<title>HTML5 问 卷 调查 页 面 示例 </title> 
<link rel="stylesheet" href="css/questionnaire.css"> 
</head> 


在 CSS 文件 中 为 <div> 标 签 设置 样式 ， 具 体 样 式 要 求 如 下 。 
。 颜色 : 背景 颜色 为 白色 。 
。 尺寸 宽度 为 900 像素 。 
。 边 距 ， 各 边 的 内 边 距 为 15 像素 ， 外 边 距 定义 为 auto， 以 便 可 以 居中 显示 。 
。 文本 : 居中 显示 ， 字 体 采用 了 微软 雅 黑 的 格式 。 
。 特殊 : 使 用 CSS3 技术 为 其 定义 边框 阴影 效果 ， 在 其 右 下 角 有 黑色 投影 。 
相关 CSS 代码 片段 如 下 : 
/* 问 卷 面板 样式 */ 
#questionnaire{ 
background-color:white; 


padding:15px; 
margin: auto; 





width:900px; 

text-align:center; 
font-family: "微软 雅 黑 "; 
box-shadow: 10PX 1l0px 15px black; 





其 中 box-shadow 属性 用 于 为 元 素 设 置 阴影 效果 ， 在 这 里 仅 为 美化 页 面 做 简单 使 用 。 
在 CSS 文件 中 为 水 平 线 标签 <hr> 做 简单 样式 修改 : 设置 水 平 线 为 80% 的 宽度 , 线条 为 | 第 
1 像素 的 橙色 实 线 ， 底 端 外 边 距 为 15 像素 。 4 
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相关 CSS 代码 片段 如 下 : 


/* 水 平 线 样式 */ 

hr{ 
width:80%; 
border:orange lpx solid; 
margin-bottom:15px; 








} 
由 于 网 页 背景 颜色 默认 为 白色 ,与 <div> 元 素 设置 的 背景 颜色 相同 。 为 了 区 分 ,将 网 页 
的 背景 颜色 设置 为 浅 灰 色 。 

相关 CSS 代码 片段 如 下 : 











body { 


background-color:#CCCCCC; /* 设 置 页 面 的 背景 颜色 为 浅 灰 色 */ 





} 
此 时 页 面 效 果 如 图 4-9 所 示 。 
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手机 移动 支付 业务 问卷 调查 


图 4-9 HIML5 问卷 调查 页 面 的 效果 图 


由 图 4-9 可 见 ， 关 于 <div> 标 签 的 样式 要 求 已 初步 实现 。 目 前 尚未 在 <div> 首 尾 标签 之 
间 填 充 表单 的 相关 内 容 ， 因 此 在 网 页 上 浏览 没有 完整 效果 ， 需 等 待 后 续 补 充 。 下 面 介 绍 如 
何 创 建 表单 。 


4.2.2 表单 设计 


本 节 主 要 介绍 如 何在 页 面 上 创建 完整 表单 ， 包 括 问 卷 调查 中 的 单 选 、 多 选 选项 以 及 个 
人 信息 使 用 的 单行 文本 框 。 

1. 表单 元 素 <form> 的 设计 

首先 在 <div> 元 素 的 预 留 区 域 添 加 一 个 表单 元 素 <formm>。 相 关 HIMLS5 代码 片段 如 下 : 


<body> 
<div id="container"> 


<! 一 -页 面 标题 --> 
<h1> 手 机 移动 支付 业务 问卷 调查 </h1> 








<! 一 -水 平 线 --> 
<hr /> 
<!-- 表 单 --> 


<form method="post" action="URL"> 
</form> 





</div> 
</body> 
其 中 ，<form> 首 标签 中 的 method 属性 用 于 定义 提交 数据 使 用 POST 方法 ，action 属性 
于 定义 提交 给 服务 器 的 地 址 ， 在 这 里 根据 实际 情况 改 成 真实 的 服务 器 地 址 即 可 。 
在 CSS 文件 questionnaire.css 中 为 表单 元 素 <form> 进 行 样式 设置 。 
。 文本 : 对 齐 方式 为 左 对 齐 ; 
。 尺寸 : 宽度 为 问卷 调查 页 面 宽度 的 80%， 高 度 根据 文字 内 容 自 适应 ; 
。 边 距 : 各 边 的 外 边 距 设置 为 auto， 以 便 将 表单 居中 显示 。 
相关 CSS 代码 片段 如 下 : 
/* 表 单 样式 */ 
formti 
text-align:left; 


width:80%; 
margin:auto; 






































} 





此 时 由 于 表单 内 部 尚未 填充 内 容 ， 所 以 页 面 效 果 暂 无 明显 变化 。 

2. 使 用 有 序列 表 标 签 <ol> 设 计 问题 样式 

在 表单 中 使 用 有 序列 表 标 签 <ol> 和 列表 选项 标签 <li> 制 作 问卷 调查 的 问题 ， 问 题 将 自 
动 显示 为 阿拉 伯 数 字 序号 标记 。 相 关 HIMLS 代码 片段 如 下 : 





<form method="post" action="URL"> 
<ol> 
<1i> 您 的 教育 程度 是 ? </1i> 
<!-- 表 单 选 项 内 容 --> 


<1i> 您 的 年 龄 段 是 ? </1i> 
<!-- 表 单 选项 内 容 --> 


<1i> 您 是 否 使 用 过 手机 移动 支付 业务 ? </1i> 
<!-- 表 单 选项 内 容 --> 


<1i> 您 了 解 以 下 哪些 手机 移动 支付 业务 ? 〈 可 多 选 ) </1i> 
<!-- 表 单 选项 内 容 --> 


<1i> 您 看 重 以 下 哪些 支付 功能 ? 〈 可 多 选 ) </1i> 
<!-- 表 单 选项 内 容 --> 
</olL> 
</form> 


其 中 列表 选项 标签 <li> 生 成 的 每 个 问题 均 会 自动 产生 编号 ， 问 题 下 方 预 留 位 置 等 待 补 
充 具 体 的 选项 内 容 。 
在 CSS 文件 questionnaire.css 中 为 列表 选项 标签 <li> 进 行 简单 的 样式 设置 : 上 、 下 外 边 
距 为 10 像素 ， 左 、 右 外 边 距 为 0。 相关 CSS 代码 片段 如 下 : 
/* 列 表 选项 样式 */ 
1 
margin:10px 07 
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此 时 的 运行 效果 如 图 4-10 所 示 。 
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手机 移动 支付 业务 问卷 调查 


1. 您 的 教育 程度 是 ? 
2. 您 的 年 龄 段 是 ? 
否 使 用 过 手机 移动 支付 业务 ? 





4. 您 了 解 以 下 哪些 手机 移动 支付 业务 ?( 可 多 选 ) 
5. 您 看 重 以 下 哪些 支付 功能 ?( 可 多 选 ) 





图 4-10 HTMLS5 问卷 调查 页 面 的 有 序列 表 





由 图 4-10 可 见 , 关于 问卷 调查 页 面 的 5 个 调研 问题 已 初步 实现 。 下 一 节 将 介绍 如 何在 
表单 中 为 每 个 问题 创建 回答 选项 。 

3. 使 用 <input> 标 签 设计 问题 选项 

在 问卷 调查 中 的 前 3 个 问题 均 为 单 选 题 ， 选 项 使 用 radio 类 型 的 <inputf> 标 签 创建 ;后 
两 个 问题 均 为 多 选 题 ， 选 项 使 用 checkbox 类 型 的 <input> 标 签 创 建 ， 并 将 选项 分 别 嵌 套 在 
<label> 元 素 的 首尾 标签 内 ， 以 便 单 击 标签 上 的 文字 内 容 即 可 让 输入 框 获 得 焦点 。 

相关 HIMLS 代码 片段 如 下 : 





<form method="post" action="URL"> 
<ol> 


<1i> 您 的 教育 程度 是 ?</1i> 

<label><input type="radio" name="ql" value="ql _ 1" /> 高 中 </1label> 
<label><input type="radio" name="ql" value="ql 2" /> 大 专 </label> 
<label><input type="radio" name="ql" value="ql 3" /> 本 科 </label> 
<label><input type="radio" name="ql" value="ql_4" /> 硕士 研究 生 </label> 
<label><input type="radio" name="ql" value="ql_5" /> 博士 及 以 上 </1label> 


<1i> 您 的 年 龄 段 是 ? </1i> 

<label><input type="radio" name="q2" value="q2_ 1" />18 岁 以 下 </label> 
<label><input type="radio" name="q2" value="q2 2" />18-25 岁 </label> 
<label><input type="radio" name="q2" value="q2 3" />26-30 岁 </label> 
<label><input type="radio" name="q2" value="q2 4" />31-35 岁 </label> 
<label><input type="radio" name="q2" value="q2 5" />35 岁 以 上 </label> 


<1i> 您 是 否 使 用 过 手机 移动 支付 业务 ? </1i> 
<label><input type="radio" name="q3" value="q3_1" /> 从 未 听 说 过 </1label> 
<label><input type="radio" name="q3" value="q3_2" /> 
听 说 过 ， 但 未 使 用 过 
</label> 
<label><input type="radio" name="q3" value="q3 3" /> 偶尔 使 用 </1label> 











<label><input type="radio" name="q3" value="q3 4" /> 经 常 使 用 </1label> 
<1i> 您 了 解 以 下 哪些 手机 移动 支付 业务 ? (可 多 选 ) </1i> 
<label><input type="checkbox" name="q4" value="q4 1" /> 支付 宝 </1abel> 
<label><input type="checkbox" name="q4" value="q4 2" /> 微 信 支 付 </1label> 
<label><input type="checkbox" name="q4" value="q4 3" /> 
电信 壬 支付 
</label> 
<label><input type="checkbox"name="q4"value="q4 4"/>Apple Pay </label> 
<input type="checkbox" name="q4" value="q4_5" /> 以 上 均 不 了 解 </label> 
<1i> 您 看 重 以 下 哪些 支付 功能 ?可 多 选 ) </1i> 
<label><input type="checkbox" name="q5" value="q5 1" /> 
话费 /游戏 币 充 值 
</label> 
<br /> 
<label><input type="checkbox" name="q5" value="q5 2" /> 
刷 手机 加 油 
</label> 
<br /> 
<label><input type="checkbox" name="q5" value="q5 3" /> 
刷 手 机 购物 
</label> 
<br /> 
<label><input type="checkbox" name="q5" value="q5 4" /> 
刷 手机 乘坐 公交 /轻轨 /地 铁 
</label> 
<br /> 
<label><input type="checkbox" name="q5" value="q5 5" /> 
水 电 煤 /有 线 电视 /宽带 远程 缴费 
</label> 
<br /> 
<label><input type="checkbox" name="q5" value="q5 6" /> 
享受 联盟 商户 的 优惠 折扣 
</label> 
<br /> 
<label><input type="checkbox" name="q5" value="95 7" /> 
以 上 均 不 感 兴趣 
</label> 
</o01> 
</form> 








问卷 调查 中 每 个 问题 对 应 的 <input> 选 项 需要 使 用 完全 相同 的 name 名 称 ， 表 示 划 分 为 
同一 个 组 ， 这 里 使 用 了 ql 一 q5 的 自 定义 名 称 。 单 选 域 radio 类 型 使 用 相同 名 称 可 以 实现 只 
能 单 选 的 效果 ; 多 选 域 checkbox 类 型 使 用 相同 名 称 是 为 了 提交 表单 时 将 同一 题 的 答案 批量 
关联 同一 个 name 名 称 传递 给 服务 器 。 

在 CSS 文件 中 为 输入 标签 <input> 进 行 简单 的 样式 设置 : 各 边 的 外 边 距 均 为 10 像素 。 

相关 CSS 代码 片段 如 下 : 











/* 输 入 表单 样式 */ 
input{ 
margin:10px; 
第 
此 时 页 面 效 果 如 图 4-11 所 示 。 4 
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四 HTML5 问 卷 调查 页 面 示例 x 人 
CQ 问卷 调查 页 面 .html 9 三 
手机 移动 支付 业务 问卷 调查 
1 您 的 教育 程度 是 ? 
高 中 9 大 专 9 本科 9 硕士 研究 生 。 博士 及 以 上 
2. 您 的 年 龄 段 是 ? 


18 岁 以 下 18-25 岁 26-30 岁 31-35 岁 35 岁 以 上 
3, 您 是 否 使 用 过 手机 移动 支付 业务 ? 

从 未 听 说 过 8 听 说 过 ， 但 未 使 用 过 @ 偶尔 使 用 经 常 使 用 
4 . 您 了 解 以 下 哪些 手机 移动 支付 业务 ? ( 可 多 选 ) 

支付 宝 日 微 信 支付 各 电信 过 支付 名 Apple Pay 日 以 上 均 不 了 解 
5. 您 看 再 以 下 哪些 支付 功能 了 ( 可 多 选 ) 

话费 /游戏 币 充值 

刷 手机 加 油 

刷 手机 购物 

剧 手机 乘坐 公交 /轻轨 /地 铁 

水 电焊 /有 绪 电视 /宽带 远程 缴费 

享受 联盟 商户 的 优惠 折扣 

以 上 均 不 感 兴趣 











图 4-11 HTMLS5 问卷 调查 页 面 的 问题 选项 


由 图 4-11 可 见 , 目 前 问卷 调查 页 面 上 的 5 个 问题 和 相关 选项 已 初步 成 型 。 接 下 来 将 介 
绍 如 何在 表单 中 添加 个 人 信息 填写 栏目 。 

4. 使 用 <input> 标 签 设计 个 人 信息 填写 栏目 

在 问题 与 选项 的 下 方 使 用 <input> 标 签 添加 个 人 信息 输入 框 ， 包 括 姓名 、 职 位 和 联系 电 
话 。 其 中 姓名 和 职位 使 用 的 是 text 类 型 ， 联 系 电话 使 用 了 tel 类 型 。 相 关 HIMLS 代码 片段 
如 下 : 






<form method="post" action="URL"> 

… 《前 面 的 问题 和 选项 的 相关 代码 省 略 ) 
<label> 您 的 姓名 <input type="text" name="name" /></label> 
<label> 您 的 职业 <input type="text" name="position" /></label> 
<label> 联 系 电话 <input type="tel" name="tel" /></label> 

</form> 

在 CSS 文件 questionnaire.css 中 为 text 和 tel 类 型 的 <input> 标 签 进行 样式 设置 。 

。 尺寸 : 宽 130 像素 ， 高 20 像素 。 

。 字体: 大 小 为 16 像素 ， 字 体 风格 为 微软 雅 黑 。 

。 边框 : 去 掉 所 有 边框 线 ， 并 重新 设置 底部 边框 线 为 1 像素 的 实 线 。 

相关 CSS 代码 片段 如 下 : 











/+ 输入 表单 样式 */ 
input [type="text"], input [type="tel"]{ 
width:130px; 
height:20px; 
font-size:16px; 
font-family: "微软 雅 黑 "; 
border:0px; 
border-bottom:1px solid; 
outline:none; 


} 








其 中 最 后 3 行 代码 是 为 了 实现 输入 框 的 下 画 线 效果 。 由 
陷 效 果 ， 
此 时 页 面 效 果 如 图 4-12 所 示 。 








六 HTML5 问 卷 调查 页 面 示例 x 
| CQ 问卷 调查 页 面 .html 


手机 移动 支付 业务 问卷 调查 


1 您 的 教育 程度 是 了 
高 中 9 大 专 9 本 科 
2. 您 的 年 龄 段 是 ? 
18 岁 以 下 18-25 岁 
3. 您 是 否 使 用 过 手机 移动 支付 业务 ? 
从 未 听 说 过 9 听 说 过 ,但 未 使 用 过 
4 您 了 解 以 下 哪些 手机 移动 支付 业务 ? ( 可 多 选 ) 
支付 宝 及 微 信 支付 全 电信 算 支 付 
5. 您 看 十 以 下 哪些 支付 功能 ? ( 可 多 选 ) 
话费 /游戏 币 充 值 
刷 手机 加 油 
刷 手 机 购物 
刷 手机 乘坐 公交 /轻轨 /地 铁 
水 电焊 /有 线 电视 / 完 沉 远程 缴费 
享受 联盟 商户 的 优惠 折扣 
以 上 均 不 感 兴趣 


硕士 研究 生 博士 及 以 上 


26-30 岁 31-35 岁 


偶尔 使 用 


Apple Pay 


您 的 姓名 


您 的 职业 联系 电话 


35 岁 以 上 


经 常 使 用 


以 上 均 不 了 解 


于 输入 框 本 身 默 认 会 有 一 个 凹 


因此 需要 先 去 掉 边 框 ， 再 自行 重新 定义 底部 的 边框 线 。 

















图 4-12 HIML5 问卷 调查 页 面 新 增 个 人 信息 栏目 


绍 如 何在 表单 内 容 的 末尾 添加 自 定义 样式 的 提交 按钮 。 
5. 使 用 <button> 标 签 设计 问卷 提交 按钮 
在 输入 域 下 方 添加 按钮 ， 这 里 使 用 了 <button> 标 签 以 便 


景 颜色 等 内 容 。 在 <button> 元 素 的 外 部 添加 了 一 个 id "btn" 的 <div> 元 素 ， 以 便 在 CSS 文件 














中 为 


设置 居中 显示 的 样式 。 
相关 HIMLS 代码 片段 如 下 : 





由 图 4-12 可 见 , 问卷 调查 页 面 最 下 方 的 个 人 信息 填写 栏目 己 经 基本 实现 。 接 下 来 将 介 


可 以 自 定义 按钮 上 的 文本 及 背 
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<form method="post" action="URL"> 
… 《前面 的 问题 和 个 人 信息 的 相关 代码 省 略 ) 
<div id="btn"> 


<button type="submit"> 提 交 问 卷 </button> 




















</div> 
</form> 
其 中 ，<button> 标 签 的 类 型 为 submit 表示 其 为 提交 按钮 ， 当 用 户 单 击 该 按钮 时 可 以 向 


为 id= "btn" 的 <div> 元 素 设置 CSS 样式 : 文本 为 居中 对 齐 的 方式 。 


/* 按 钮 外 区 域 div 元 素 样式 */ 
#btn{ 


text-align:center; 
} 





在 CSS 文件 中 为 按钮 标签 <zbutton> 进 行 具体 的 样式 设置 。 

。 尺寸 : 宽度 为 120 像素 、 高 度 为 40 像素 。 

。 颜色 : 背景 颜色 为 橙色 ， 字 体 颜色 为 白色 。 

。 边框 : 0 像素 〈 无 边框 效果 )。 

。 边 距 : 各 边 的 外 边 距 为 10 像素 。 

。 字体 : 字体 大 小 为 18 像素 、 加 粗 显示 ， 字 体 采用 了 微软 雅 黑 的 格式 。 
相关 CSS 代码 片段 如 下 : 








/* 按 钮 样式 */ 


buttont{ 
width:120px; 
height:40px; 
background-color:orange; 
border:0px; 
color: white; 
margin:10px; 
font-size:18px; 
font-family: "微软 雅 黑 "; 
font-weight:bold; 





还 可 以 为 <button> 标 签 设置 鼠标 悬浮 时 的 样式 效果 ， 在 CSS 样式 表 中 用 button:hover 
表示 。 本 例 将 该 效果 设置 为 按钮 背景 颜色 的 改变 ， 换 成 颜色 加 深 的 橙色 颜色 的 十 六 进 制 
码 为 手 F6835 )。 

相关 CSS 代码 片段 如 下 : 





/* 鼠 标 悬 浮 时 按钮 样式 */ 
button:hovert{ 
background-color:#FF6835; 


} 

比 时 整个 样式 设计 就 全 部 完成 了 ， 其 页 面 效果 如 图 4-13 所 示 。 

图 4-13 可 见 , 关于 问卷 调查 页 面 的 布局 和 样式 要 求 已 初步 实现 。 表单 元 素 的 提示 与 
验证 功能 将 在 下 一 节 介绍 。 























站 HTML5 问 券 调查 页 面 示例 x 
C QQ 问卷 调查 页 面 .html 和 三 





手机 移动 支付 业务 问卷 调查 


1 您 的 教育 程度 是 ? 
高 中 大 专 本 科 硕士 研究 生 博士 及 以 上 
2. 您 的 年 龄 段 是 ? 
18 岁 以 下 日 18-25 岁 9 26-30 岁 9 31-35 岁 9 35 岁 以 上 
3. 您 是 否 使 用 过 手机 移动 支付 业务 ? 
从 未 听 说 过 听 说 过 ， 但 未 使 用 过 偶尔 使 用 经 常 使 用 
4. 您 了 解 以 下 哪些 手机 移动 支付 业务 ?( 可 多 选 ) 
】 支付 宝 日 微 信 支 付 各 电信 避 支 付 日 Apple Pay 日 以 上 均 不 了 解 
5. 您 看 重 以 下 哪些 支付 功能 ? ( 可 多 选 ) 
话 栅 /游戏 币 充 值 
刷 手机 加 油 
刷 手机 购物 
) 刷 手机 乘坐 公交 /轻轨 /地 铁 
水 电焊 /有 线 电视 /宽带 远程 缴费 
) 享受 联盟 商户 的 优惠 折扣 
】 以 上 均 不 感 兴趣 


您 的 姓名 您 的 职业 联系 电话 














图 4-13 HTMLS5 问卷 调查 页 面 的 完整 版 效果 图 


4.2.3 ”验证 功能 的 实现 


本 节 主 要 介绍 如 何 实现 HIML 表单 的 提示 与 验证 功能 ， 包 括 以 下 内 容 : 
为 所 有 单 选 框 添加 非 空 验证 ; 
为 个 人 信息 栏 添加 非 空 验证 ; 
为 所 有 多 选 框 添 加 非 空 验证 。 
1. 使 用 <input> 标 签 的 required 属性 实现 单 选 框 的 非 空 验证 
为 所 有 radio 类 型 的 <input> 标 签 添加 HTMLS5 表单 新 增 的 required 属性 以 实现 非 空 验 
证 ， 可 以 写成 完整 版 required="required"， 也 可 以 简写 为 required。 
以 第 一 组 单 选 按钮 为 例 ， 相 关 HTMLS5 代码 片段 修改 后 如 下 : 
<1i> 您 的 教育 程度 是 ? </1i> 
<label><input type="radio" name="ql" value="ql 1" required /> 高 中 </label> 


<label><input type="radio" name="ql" value="ql 2" required /> 大 专 </label> 
<label><input type="radio" name="ql" value="ql 3" required /> 本 科 </label> 4 














HTML5 于 党 4PT 项 月 


HTML5 克 页 户 纲 族 矿 实 此 





<label><input type="radio" name="ql" value="ql 4" required /> 硕士 研究 生 














</label> 

<label><input type="radio" name="ql" value="ql 5" required /> 博士 及 以 上 

</label> 

由 于 单 选 按钮 涉及 修改 的 地 方 较 多 ， 并 且 修 改 方式 完全 一 样 ， 所 以 这 里 不 再 列举 其 他 
需要 做 相同 修改 的 代码 。 


此 时 为 了 测试 效果 故意 将 第 一 问 的 选项 保持 空白 并 单 击 “提交 问卷 ”按钮 。 
运行 效果 如 图 4-14 所 示 。 


HTML5 问 着 调 直 责 面 示例 x 
所 他 CG Q 问卷 调查 页 面 .html 三 
手机 移动 支付 业务 问卷 调查 
1 您 的 教育 程度 是 ? 


目 高 中 9 大 专 日 本 科 日 硕士 研究 生 。 博士 及 以 上 
2 3 : 4 村 
回 请 从 这 些 选项 中 选择 一 个 。 
31-35 岁 35 岁 以 上 
3. 您 是 否 使 用 过 手机 移动 支付 业务 
从 未 听 说 过 e 听 说 过 , 但 未 使 用 过 。 偶尔 使 用 9 经 常 使 用 
4. 您 了 解 以 下 哪些 手机 移动 支付 业务 ?( 可 多 选 ) 
支付 宝 日 微 信 支 付 号 电信 各 支付 日 Apple Pay 日 以 上 均 不 了 解 
5. 您 看 责 以 下 哪些 支付 功能 ? ( 可 多 选 ) 
话费 /游戏 币 充 值 
剧 手机 加 油 
刷 手机 购物 
剧 手 机 降 坐 公交 /轻轨 /地 铁 
水 电焊 /有 线 电视 / 突 带 远程 缴 要 
享受 联盟 商户 的 优惠 折扣 
以 上 均 不 感 兴趣 

















图 4-14 HIML5 用 户 注册 页 面 的 单 选 按钮 的 非 空 验证 





由 图 4-14 可 见 ，<input> 标 签 的 required 属性 生效 ， 该 属性 可 以 自动 为 radio 类 型 的 单 
选 按钮 进行 非 空 验证 ， 当 用 户 没 有 输入 任何 内 容 时 会 终止 表单 数据 的 提交 并 弹出 提示 。 
2. 使 用 <input> 标 签 的 required 属性 实现 个 人 信息 栏 的 非 空 验证 
个 人 信息 栏 包括 text 类 型 和 tel 类 型 的 <input> 元 素 ， 均 显示 为 单行 文本 输入 框 样式 。 
其 非 空 验证 的 修改 方式 和 之 前 一 样 ， 需 要 添加 required 属性 。 

相关 HIMLS 代码 片段 修改 后 如 下 : 

<label> 您 的 姓名 <input type="text" name="name" required /></label> 


<label> 您 的 职业 <input type="text" name="position" required /></label> 
<labe1> 联 系 电话 <input type="tel" name="tel" required /></label> 
































此 时 为 了 测试 效果 故意 将 所 有 个 人 信息 的 输入 框 均 保持 空白 并 单 击 “提交 问卷 ”按钮 。 
运行 效果 如 图 4-15 所 示 。 


回 - “= ED 
中 HTML5 问 卷 调查 页 面 示例 x 
所 他 CQ 问卷 调查 页 面 .html 和 三 
手机 移动 支付 业务 问卷 调查 
1. 您 的 教育 程度 是 ? 
高 中 9 大 专 9 本 科 8 硕士 研究 生 。 博士 及 以 上 


2. 您 的 年 龄 段 是 ? 
@ 18 岁 以 下 18-25 岁 26-30 岁 31-35 岁 35 岁 以 上 
3. 您 是 否 使 用 过 手机 移动 支付 业务 ? 
@ ”从 未 听 说 过 9 听 说 过 ,但 未 使 用 过 9 偶尔 使 用 8 经 常 使 用 
4. 您 了 解 以 下 哪些 手机 移动 支付 业务 ?( 可 多 选 ) 
本 支付 宝 日 微 信 支付 号 电信 过 支付 日 Apple Pay 日 以 上 均 不 了 解 
5. 您 看 重 以 下 哪些 支付 功能 ? ( 可 多 选 ) 
话机 /游戏 币 充值 
剧 手机 加 油 
刷 手机 购物 
刷 手机 生 坐 公交 /轻轨 /地 铁 
水 电焊 /有 线 电视 /宽带 远程 缴 要 
享受 联盟 商户 的 优惠 折扣 
以 上 均 不 感 兴趣 


您 的 姓名 您 的 职业 联系 电话 





回 请 圳 写 此 字段 . 











图 4-15 HTML5 用 户 注 册页 面 的 个 人 信息 的 非 空 验证 


由 图 4-15 可 见 ，<input> 标 签 的 required 属性 生效 ， 该 属性 可 以 自动 为 text 或 tel 类 型 
的 输入 框 进行 非 空 验证 ， 当 用 户 没 有 输入 任何 内 容 时 会 终止 表单 数据 的 提交 并 弹出 提示 。 

3. 使 用 JavaScript 自 定 义 函 数 实现 多 选 框 的 非 空 验证 

本 例 不 适合 为 checkbox 类 型 的 <input> 元 素 添加 required 属性 来 进行 非 空 验证 , 因为 这 
会 导致 同 组 多 选 框 中 的 每 一 个 选项 都 成 为 必 选 ， 并 不 符合 最 少 只 需要 选择 其 中 一 个 选项 的 
条 件 ， 所 以 另外 使 用 JavaScript 自 定义 函数 为 多 选 框 进行 非 空 验证 。 

在 本 地 js 文件 夹 中 创建 questionnairejs 文件 , 并 在 <head> 首 尾 标签 中 声明 对 该 JS 文件 
的 引用 。 修 改 后 的 相关 HIMLS 代码 片段 如 下 : 


<head> 











<meta charset="utf-8" > 
<title>HTML5 问 卷 调查 页 面 示例 </title> 
<link rel="stylesheet" href="css/questionnaire.css"> 
<script src="js/questionnaire.js"></script> 

</head> 








于 对 问卷 调查 页 面 上 的 第 4、5 题 非 空 验证 的 判断 思路 完全 相同 ， 所 以 在 JavaScript | 4 














HTML5 丢 党 4PT 项 月 





HTML5 网页 到 弱 帮 矿 侨 此 











中 声明 返回 值 为 布尔 值 的 checkBox(name) 方 法 ， 用 于 判断 同 组 的 选项 是 否 为 空 。 可 以 先 获 
取 同 组 的 所 有 选项 元 素 ， 然 后 使 用 for 循环 语句 遍历 每 个 选择 ， 并 判断 当前 选项 是 否 为 选 
中 状态 。 

相关 JavaScript 代码 片段 如 下 : 


function checkBox (name){ 
// 用 于 统计 被 勾 选 的 选项 数量 
Var j=0; 
// 获 取 指定 name 名 称 的 同 组 的 所 有 复 选 框 元 素 
Var checkbox = document .getElementsByName (name); 
// 人 遍历 选项 组 中 的 所 有 选项 
for (var i=0; i<checkbox.length;i++){ 
// 判 断 当前 是 否 有 选中 的 选项 
if(checkbox[i] .checked){ 
了 ++7 
/ /如果 有 选项 为 选中 状态 则 直接 跳出 遍历 循环 


break; 











} 
} 
if(j==0) return false; 
return true; 





其 中 ,document.getElementsByName(name) 用 于 获取 指定 name 名 称 的 同 组 多 选 框 中 的 
所 有 选项 元 素 。 在 使 用 for 循环 对 同 组 的 所 有 选项 元 素 进行 遍历 时 判断 checkbox[i].checked 
的 返回 值 是 否 为 真 ， 为 真 表示 当前 选项 为 选中 状态 ， 否 则 表示 未 选中 。 一 旦 发 现 有 选中 的 
选项 则 令 初始 等 于 0 的 变量 /7 自 增 ， 然 后 立刻 跳出 整个 循环 。 
最 后 只 需要 判断 变量 j 此 刻 的 数值 是 否 仍然 为 0， 如 果 为 0 则 表示 所 有 选项 均 未 被 选 
中 ， 可 以 返回 false〈 假 )， 和 否则 返回 tue〈 真 )。 
接 下 来 在 JavaScript 中 创建 新 的 自 定义 函数 check0 用 于 完整 验证 问卷 调查 页 面 中 的 第 
4、5 题 是 否 为 空 。 相 关 JavaScript 代码 片段 如 下 : 
function check(){ 
// 调 用 checkBox (name) 函数 判断 第 4 题 的 情况 
Var q4 = checkBox ("q4") 7 
if (q4==false) { 
alert ("第 4 题 起 码 要 选择 一 个 选项 。") ; 


return false; 


} 

// 调 用 checkBox (name) 函数 判断 第 5 题 的 情况 

Var q5 = checkBox("q5"); 

if (gq5==false){ 
alert ("第 5 题 起 码 要 选择 一 个 选项 。") ; 
return false; 

} 

return true; 














在 该 方法 中 依次 对 checkBox(name) 函 数 进行 了 调用 ， 分 别 填 入 不 同 的 name 名 称 (q4 
和 q5) 即 可 对 指定 的 题 号 迅速 作出 判断 。 其 中 任何 一 题 没有 完成 勾 选 都 会 弹出 对 话 框 并 给 
出 相关 提示 语句 。 














为 <form> 标 签 添加 onsubmit 属性 用 于 监听 提交 表单 的 动作 , 一 旦 用 户 提交 表单 先 调用 
JavaScript 函数 进行 相关 分 析 判 断 ， 再 做 下 一 步 决 定 。 

相关 HIMLS 代码 片段 修改 后 如 下 : 

<form method="post" action="URL" onsubmit="return check()"> 

… (内 容 省 略 ) 

</form> 

此 时 调用 JavaScript 自 定义 函数 check0O 并 获取 其 返回 值 ， 如 果 返 回 tue〈 真 ) 则 继续 
提交 表单 ， 否 则 将 终止 本 次 表单 的 提交 。 

为 测试 JavaScript 函数 的 验证 效果 ， 故 意 将 第 5 题 不 填 并 单 击 “提交 问卷 ”按钮 。 

运行 效果 如 图 4-16 所 示 。 











四 - = 


站 HTML5 问 着 调查 页 面 示例 x 人 
CQ 问卷 调查 页 面 .html 三 


此 网 页 显示 : 
一 第 5 题 起 码 要 选择 一 个 选项 ， 三 
1 


2 

18 风 以 下 18-25 岁 @ 26-30 岁 31-35 岁 35 岁 以 上 
3. 您 是 否 使 用 过 手机 移动 支付 业务 ? 

从 未 听 说 过 @ 听 说 过 ,但 未 使 用 过 偶尔 使 用 8 经 常 使 用 
4. 您 了 解 以 下 哪些 手机 移动 支付 业务 ?( 可 多 选 ) 

支付 宝 微 信 支付 台电 信 算 支付 妈 3 Apple Pay 日 以 上 均 不 了 解 
5. 您 看 各 以 下 哪些 支付 功能 ? ( 可 多 选 ) 

话 慢 /游戏 币 充值 

刷 手 机 加 油 

刷 手 机 购物 

刷 手机 夭 坐 公交 /轻轨 /地 铁 

水 电 煤 /有 线 电视 /宽带 远程 缴 机 

享受 联盟 商户 的 优惠 折扣 

以 上 均 不 感 兴趣 


您 的 姓名 测试 员 您 的 职业 公务 员 联系 电话 123 











图 4-16 HIML5 用 户 注册 页 面 的 多 选 按钮 的 非 空 验证 





由 图 4-16 可 见 ，JavaScript 的 自 定义 函数 生效 并 成 功 地 完成 了 多 选 框 的 非 空 验证 。 至 
此 本 例题 已 全 部 完成 。 


4.2.4 ”完整 代码 展示 


HIMLS 完整 代码 如 下 : 


第 


玉 


章 
HTML5 藤 浓 4PI 项 月 


HTML5 网 页 碘 带 克 计 侨 紫 














E <!DOCTYPE html> 

2 <html> 

3 <head> 

4. <meta charset="utf-8" > 

5 <title>HTML5 问 卷 调查 页 面 示例 </title> 

6 <link rel="stylesheet" href="css/questionnaire.css"> 

分 <script src="js/questionnaire.js"></script> 

8. </head> 

9 <body> 

10; <div id="questionnaire"> 

Ls <!-- 页 面 标题 --> 

1 <h1> 手 机 移动 支付 业务 问卷 调查 </h1> 

2 <!-- 水 平 线 --> 

14. <hr /> 

<!-- 表 单 --> 

16. <form method="post" action="URL" onsubmit="return check()"> 
17。 <O1> 

18: <1i> 您 的 教育 程度 是 ? </1i> 

9s <label> 

20. <input type="radio"name="ql" value="ql] 1l"required/> 
21. 高 中 </label> 

22: <label> 

3 <input type="radio"name="ql" value="ql_2" required /> 
24. 大 专 </label> 

2 <label> 

26. <input type="radio"name="ql" value="ql_3" required /> 
27: 本 科 </1label> 

28. <label> 

29. <input type="radio"name="ql" value="ql_4" required /> 
30: 硕士 研究 生 </1abel> 

SI: <label> 

D2 <input type="radio"name="ql" value="ql_5" required /> 
33: 博士 及 以 上 </1abel> 

34。 

Sk <1i> 您 的 年 龄 段 是 ?</1i> 

36s5 <label> 

37. <input type="radio"name="q2" value="q2_1" required /> 
38. 18 岁 以 下 </label> 

39. <label> 

40 . <input type="radio"name="q2" value="q2_2" required /> 
41. 18-25 岁 </label> 

42. <label> 

3 <input type="radio"name="q2" value="q2_3" required /> 
44. 26-30 岁 </label> 

45. <label> 

46. <input type="radio"name="q2" value="q2 4" required /> 
47. 31-35 岁 </label> 

48. <label> 

49. <input type="radio"name="q2" value="q2 5" required /> 
50. 35 岁 以 上 </1label> 

Sls 

Ss <1i> 您 是 否 使 用 过 手机 移动 支付 业务 ? </1i> 

53. <label> 

54. <input type="radio"name="q3" value="q3_1" required /> 
as 从 未 听 说 过 </1abel> 

56。 <label> 

S57 <input type="radio"name="g3" value="q3 2" required /> 

















58 - 听 说 过 ， 但 未 使 用 过 </1label> 

S59% <label> 

60 . <input type="radio" name="q3"value="q3 3" required /> 

61. 偶尔 使 用 </1label> 

62. <label> 

63. <input type="radio"name="q3" value="q3 4" required /> 

64. 经 常 使 用 </1abel> 

65。 

66. <1i> 您 了 解 以 下 哪些 手机 移动 支付 业务 ? (可 多 选 ) </1i> 

67. <label> 

68. <input type="checkbox" name="q4" value="q4 1" /> 

69 . 支付 宝 </label> 

70 . <label> 

ss <input type="checkbox" name="q4" value="q4 2" /> 

72; 微 信 支付 </1label> 

‘13s <label> 

74. <input type="checkbox" name="q4" value="q4 3" /> 

更 电信 翼 支 付 </Label> 

76 . <label> 

Ps <input type="checkbox" name="q4" value="q4 4" /> 

78。 Apple Pay </label> 

请 号 <input type="checkbox" name="q4" value="q4 5" /> 

80. 以 上 均 不 了 解 

81. </label> 

B25 

83. <1i> 您 看 重 以 下 哪些 支付 功能 ?可 多 选 ) </1i> 

84. <label> 

85。 <input type="checkbox" name="q5" value="q5_1" /> 

86. 话费 /游戏 币 充值 </1abe1> 

87. 二 

88 . <label> 

89 . <input type="checkbox" name="q5" value="q5_2" /> 

90 . 刷 手 机 加 油 </1abel> 

8， AR 

325 <label> 

93. <input type="checkbox" name="q5" value="q5 3" /> 

94. 刷 手机 购物 </1abel> 

5 <br /> 

96. <label> 

Fs <input type="checkbox" name="q5" value="qg5 4" /> 

98. 刷 手 机 乘坐 公交 /轻轨 /地 铁 </1label> 

39。 <br /> 

100 . <input type="checkbox" name="q5"” value="q5 5" /> 

EO 水 电 煤 /有 线 电 视 / 宽 带 远程 缴费 </1abel> 

102. <br /> 

103. <label> 

104. <input type="checkbox" name="q5" Value="q5_6" /> 

105. 享受 联盟 商户 的 优惠 折扣 </1label> 

106. <br /> 

07. <label> 

108. <input type="checkbox" name="q5" Value="q5_7" /> 

109. 以 上 均 不 感 兴趣 </1abel> 

110,. </o1> 

全 利生 

Ls <labe1> 您 的 姓名 

pe <input type="text" name="name" required /> 第 

Te </label> 4 
章 
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Li <labe1> 您 的 职业 

116. <input type="text" name="position" required /> 
Ej </label> 

TGs <labe1> 联 系 电话 

119. <input type="tel" name="tel" required /> 
120。 </label> 

2 

人 <div id="btn"> 

2 <button type="submit"> 提 交 问 卷 </button> 
2 </div> 

ys </form> 

126. </div> 

127, </body> 

128. </html> 








CSS 文件 questionnaire.css 的 完整 代码 如 下 : 





body { 
background-color:#CCCCCC; /* 设 置 页 面 背景 颜色 为 浅 灰色 */ 
} 


1 
2 
3 
4. 
5. /#* 问 卷 面 板 样式 */ 
6 
7 
8 
9 





#questionnaire{ 
background-color:white; 
padding:15px; 

< margin: auto; 
10. width:900px; 
las text-align:center; 
12. font-family: "微软 雅 黑 "; 
3 box-shadow: 1l0px 10px 15px black; 
:| 
5s 
16. /* 标 题 样 式 */ 
Ee “ht 
Ts color:orange; 
生生 和 
2 
21.  /*# 水 平 线 样式 */ 
2 ef 
3 width:80%; 
2 border:orange lpx solid; 
25. margin-bottom:15px; 
De 
Rs 


28. /* 表 单 样式 */ 


29. formt{ 


30. text-align:1left; 
A width:80%; 

325 margin:auto; 

33。 } 

34. 

35. /* 列 表 选项 样式 */ 

5 《卫生 

> margin:10px 0; 
38. 1} 

395 


40. /* 输 入 表单 样式 */ 





input{ 
margin:10px; 
} 


/* 输 入 表单 样式 */ 

input [type="text"],input[type="tel"]{ 
width:130px; 
height:20px; 
font-size:16px; 
font-family: "微软 雅 黑 "; 
border:0px; 
border-bottom:1px solid; 
outline:none; 


} 


/* 按 钮 外 区 域 div 元 素 样式 */ 
#btn{ 
text-align:center; 





} 


/* 按 钮 样式 */ 

buttont{ 
width:120px; 
height:40px; 
background-color:orange; 
border: Opx; 
color: white; 
margin:10px; 
font-size:18px; 
font-family: "微软 雅 黑 "; 
font-weight:bold; 

} 


/* 鼠 标 悬 浮 时 按钮 的 样式 */ 
button:hovert{ 
background-color:#FF6835; 





function checkBox (name) { 

2 // 用 于 统计 被 勾 选 的 选项 数量 

Ek var j=0; 

4. // 获 取 指 定 name 名 称 的 同 组 的 所 有 复 选 框 元 素 

3 Var checkbox = document .getElementsByName (name); 
6 // 遍 历 选项 组 中 的 所 有 选项 

7 for (Var i=0; i<checkbox.length;i++){ 

8. // 判 断 当前 是 否 有 选中 的 选项 

和 if(checkbox[i] .checked) { 

10s ty 

1 / /如果 有 选项 为 选中 状态 直接 跳出 遍历 循环 
1 break; 

13. } 

14. } 

Ls if(j==0)return false; 

16。 return true; 

| 

18. 
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19. function check(){ 





2 // 调 用 checkBox (name) 函数 判断 第 4 题 的 情况 
PA Var q4 = checkBox("q4"); 

有 2 ifE(q4==false){ 

2 alert ("第 4 题 起 码 要 选择 一 个 选项 。") ; 
24. return false; 

25s 和 

26. // 调 用 checkBox (name) 函数 判断 第 5 题 的 情况 
a Var q5 = checkBox ("q5") 7 

:请 if(q5==false){ 

29: alert ("第 5 题 起 码 要 选择 一 个 选项 。") ; 
30. return false; 

a } 

2 return true; 








第 5 章 HTML5 画布 API 项 目 





本 章 主要 包含 了 两 个 基于 HTML5 画布 API 的 应 用 设计 实例 ， 一 是 手绘 时 钟 的 设计 与 
实现 ， 二 是 拼图 游戏 的 设计 与 实现 。 在 手绘 时 钟 项 目 中 ， 主 要 难点 为 时 钟 刻度 与 时 钟 的 绘 
制 以 及 时 间 实 时 更 新 的 动画 效果 ; 在 拼图 游戏 项 目 中 ， 主 要 难点 为 拼图 画面 的 初始 化 、 鼠 
标 单 击 事件 、 游 戏 计 时 功能 、 游 戏 成 功 与 重新 开始 的 判定 。 

本 章 学 习 目 标 : 

。 学 习 如 何 综合 应 用 HTML5 画布 API、CSS 与 JavaScript 开发 手绘 时 钟 项 目 ; 

。 学 习 如 何 综合 应 用 HIMLS 画布 API、CSS 与 JavaScript 开发 拼图 游戏 项 目 。 


5.1 手绘 时 钟 的 设计 与 实现 


【 例 $-1】 基于 HTMLS5 画布 的 手绘 时 钟 的 设计 与 实现 


功能 要 求 ， 不 依赖 任何 图 片 素材 ， 完 全 基于 HTMLS5 画布 -rn 
API 绘 制 时 钟 , 并 实现 每 秒 更 新 的 动态 效果 , 效果 如 图 5-1 所 示 。 [ajagewn 二 | 
5.1.1 界面 设计 Fe 





本 节 主 要 介绍 手绘 时 钟 页 面 的 界面 设计 ， 包 括 以 下 内 容 : 
。 画布 的 创建 ; 
。 时 钟 的 刻度 绘制 ; 
。 时 钟 的 指针 绘制 ; 
。 时 钟 的 表盘 绘制 。 
1.， 画布 的 创建 
使 用 <canvas> 标 签 在 页 面 上 创建 画布 , 定义 了 画布 的 宽度 和 
高 度 均 为 300 像素 ， 并 使 用 行内 样式 表 为 画布 设置 了 边框 为 1 ”图 5-1 手绘 时 钟 效果 图 
像素 宽度 的 黑色 实 线 。 相 关 HIMLS 代码 片段 如 下 : 
<body> 
<h3> 手 绘 时 钟 </h3> 
<hr /> 
<canvas id="clockCanvas" width="300" height="300" style="border:1px 
solid"> 
对 不 起 ， 您 的 浏览 器 不 支持 HTML5 画 布 RPI。 
/canvas 
5 




















该 段 代码 为 <canvas> 元 素 定 义 了 id="clockCanvas"， 以 便 可 以 在 JavaScript 中 进行 绘图 


HTML5 网 页 拭 绞 旋 矿 完 战 


工作 ， 并 且 在 <canvas> 首 尾 之 间 添 加 了 浏览 器 不 支持 画布 API 时 i 
的 提示 语句 ,如果 浏览 器 支持 HTMLS5 画布 API 则 不 会 显示 出 来 。 ee saaaemm 2 二 = 
此 时 页 面 效 果 如 图 5-2 所 示 。 手绘 时 名 





由 图 5-2 可 见 ， 带 有 边框 的 画布 效果 已 展现 在 了 页 面 上 。 由 
于 当前 还 没有 进行 绘制 ， 因 此 画布 上 无 内 容 需 等 待 后 续 补 充 。 接 
下 来 将 介绍 如 何在 画布 上 绘制 时 钟 刻度 。 

2. 绘制 时 钟 刻度 

在 进行 绘制 工作 之 前 需要 在 JavaScript 中 创建 context 对 象 。 
本 例 采用 了 内 部 JavaScript 代码 的 形式 ， 在 <body> 标 签 中 添加 
<script> 首 尾 标签 并 在 其 中 填写 相关 的 绘图 语句 。 图 5-2 在 页 面 上 创建 画布 

相关 JavaScript 代码 如 下 : 











<script> 
// 根 据 id 找 到 指定 的 画布 
var c = document .getElementById("clockCanvas"); 
// 创 建 2D 的 context 对 象 
Var ctx = c.getContext ("2d"); 


// 绘 制 时 钟 
function drawClock() { 
// 等 待 补充 绘图 代码 
} 
</script> 


该 段 代码 在 JavaScript 中 自 定 义 了 名 称 为 drawClock0 函 数 , 用 于 绘制 完整 的 时 钟 样式 。 
在 绘图 之 前 首先 在 drawClockO 函 数 中 预 设 画 笔 样 式 和 位 置 。 相 关 JavaScript 代码 
如 下 : 








<script> 


// 绘 制 时 钟 
function drawClock() { 


// 保 存 画 布 的 初始 绘制 状态 


ctx.save (); 


/* 设 置 画 笔 样式 和 位 置 */ 
// 设 置 画布 中 心 为 参照 点 
St ne (0 dh 


CER pa ME DE 2s 
// 设 置 画 笔 线条 宽度 为 6 像素 
ctXx.1inewidth = 67 

// 设 置 画 笔 线条 的 末端 为 圆 形 
ctx.lineCap = "round"; 


} 
</script> 


上 述 代码 首先 使 用 save0 方 法 保存 了 初始 的 绘图 状态 ， 然 后 开始 进行 画笔 样式 和 位 置 
的 设置 : 将 参照 点 移动 到 了 画布 的 中 心 坐 标 (150,.150)， 表 示 以 画布 中 心 为 参照 点 进行 旋转 














变形 等 设置 。 然 后 使 用 rotate0 方 法 由 水 平 向 右 的 默认 方向 逆 时 针 旋 转 90”, 换算 成 弧度 单 
位 为 x/2， 表 示 将 从 水 平 向 上 的 方向 开始 进行 绘图 。 

其 中 lineWidth 和 lineCap 属性 用 于 设置 线条 的 宽度 和 末端 形状 ， 用 户 可 以 根据 实际 开 
发 情况 自 定义 其 他 样式 效果 。 

接 下 来 绘制 12 小 时 对 应 的 12 个 刻度 ， 相 邻 的 两 个 刻度 之 间 应 该 间隔 30”， 换算 成 弧 
度 单位 为 x/6。 因 此 可 以 使 用 for 循环 语句 循环 12 次 , 从 之 前 设置 的 水 平 向 上 方位 开始 绘制 
第 一 条 刻度 ， 然 后 每 绘制 一 条 刻度 再 使 用 rotate0 方 法 顺 时 针 旋 转 30” 即 可 绘制 下 一 条 刻 
度 。 相 关 JavaScript 代码 如 下 : 


<script> 





























// 绘 制 时 钟 
function drawClock() { 


… 《代码 略 》 


/#* 设 置 画笔 样式 和 位 置 */ 
… 《代码 略 ) 


/* 画 12 个 小 时 的 刻度 */ 
// 循 环 12 次 ， 每 次 绘制 一 条 刻度 
for (var i = 0; i < 12; i++) { 
ctx.beginPath (); 
// 每 次 顺 时 针 旋 转 60° 
ctx.rotate (Math.PI / 6); 
/ /绘制 刻度 线段 的 路 径 
ctx.moveTo(100, 0); 
ctx.lineTo(120, 0); 
// 描 边 路 径 
ctx.stroke(); 
} 


} 
</script> 





这 里 绘制 了 20 像素 长 的 线段 作为 小 时 的 刻度 ， 由 距离 画布 中 心 100 像素 的 位 置 开始 ， 
绘制 到 离 中 心 120 像素 的 位 置 结束 。 由 于 绘制 完 一 圈 12 个 刻度 等 于 是 旋转 360” 还原 了 ， 
后 续 的 绘制 不 会 受到 这 段 代码 中 的 rotate0 的 影响 导致 错位 发 生 ， 因 此 无 须 使 用 save0 和 
Testore() 方 法 来 恢复 绘图 设置 。 

在 <body> 标 签 中 添加 onload 事件 并 调用 drawClock0 方 法 ， 表 示 页 面 一 旦 加 载 完毕 就 
开始 绘图 。 修 改 后 的 HTML5 代码 片段 如 下 : 

<body onload="drawClock()"> 

<h3> 手 绘 时 钟 </h3> 
<hr /> 
<canvas id="clockCanvas" width="300"” height="300" style="border:1px 
S011d"> 
对 不 起 ， 您 的 浏览 器 不 支持 HTML5 画 布 API。 
/canvas 
ba 


此 时 页 面 效 果 如 图 5-3 所 示 。 
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接 下 来 用 同样 的 思路 绘制 60 条 短 一 些 的 刻度 ， 用 于 表示 分 钟 和 秒 。 相 邻 的 两 个 刻度 
之 间 应 该 间隔 6”， 换 算 成 弧度 单位 为 x/30。 因 此 可 以 使 用 for 循环 语句 循环 60 次 ， 同 样 
从 初始 设置 的 水 平 向 上 方位 开始 绘制 第 一 条 刻度 , 然后 每 绘制 一 条 刻度 再 使 用 rotate() 方 法 
顺 时 针 旋 转 6” 即 可 绘制 下 一 条 刻度 。 相 关 JavaScript 代码 如 下 : 


<script> 


… 《代码 略 ) 
// 绘 制 时钟 


function drawClock() { 


… 《代码 略 》 




















/* 画 12 个 小 时 的 刻度 */ 
… 《代码 略 ) 


/* 画 60 分 钟 对 应 的 刻度 */ 

ctx.lineWwidth = 5; 

for (i=0; i< 60; i++) { 
ctx.beginPath (); 
ctx.moveTo(118, 0); 
ctx.lineTo(120, 0); 
ctx.stroke () 7 
ctx.rotate (Math.PI / 30); 


} 
</script> 





这 里 绘制 了 两 像素 长 的 小 线段 作为 分 钟 和 秒 的 刻度 ， 由 距离 画布 中 心 118 像素 的 位 置 
开始 ， 绘 制 到 离 中 心 120 像素 的 位 置 结束 。 同 样 是 由 于 绘制 完 一 圈 60 个 刻度 等 于 是 旋转 
360” 还 原 了 ， 后 续 的 绘制 不 会 受到 这 段 代码 中 的 rotate0) 的 影响 导致 错位 发 生 ， 因 此 无 须 
使 用 save() 和 restore() 方 法 来 恢复 绘图 设置 。 

此 时 页 面 效 果 如 图 5-4 所 示 。 
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图 5-3 在 画布 上 绘制 小 时 刻度 图 5-4 在 画布 上 绘制 分 钟 刻度 











置 上 的 分 钟 刻 度 名 

ada 可 以 在 给 

es 制 ， eee 
5 wwe 

















ep drawClock0 〇 函数 中 使 
前 的 时 间 。 相 关 JavaScript 代码 如 下 : 








由 图 5-4 可 见 ， 时 钟 的 刻度 绘制 目前 已 全 部 完成 。 事 实 上 这 里 的 小 时 刻度 与 同一 个 位 
会 制 了 两 次 ， 由 于 重 有 从 在 一 起 又 是 相同 的 颜色 所 以 不 受 影响 。 如 果 要 设置 
制 分 钟 刻度 时 加 一 个 判断 : 只 要 是 每 5 个 刻度 〈 即 5 的 倍数 》 
接 下 来 将 展示 如 何 绘制 时 钟 的 时 、 


分 、 秒 指针 。 


JavaScript 中 的 Date 对 象 获取 当 





<script> 


… 《代码 略 》 
/ /绘制 时 钟 


function drawClock() { 


… (代码 略 ) 


/#* 画 60 分 钟 对 应 的 刻度 */ 
… (代码 略 ) 


/* 获 取 当 前 时 间 */ 

Var now = new Date(); 

// 获 取 当 前 第 几 秒 

Var s = now.getseconds (); 
// 获 取 当 前 第 几 分 钟 

var m = now.getMinutes (); 
// 获 取 当 前 是 几 小 时 24 小 时 制 》 
Var h = now.getHours(); 
// 将 小 时 换算 成 12 小 时 制 的 数值 
if (h > 12) h -= 12; 


} 
</script> 








时 钟 是 12 小 时 的 显示 样式 ， 
换 为 12 小 时 制 。 

获取 到 当前 时 间 就 可 以 正式 开始 给 
当前 时 针 所 指 旋转 的 角度 为 : 


参照 ， 





时 针 的 角度 = 360/12 X 小 时 + 360/12/60 X 分 钟 + 360/12/60/60 X 秒 


因为 在 获取 结束 后 加 了 


会 制 指针 了 。 首 先 绘制 时 针 ， 


-个 站 条 件 判 断 将 当前 的 时 间 转 


以 12 点 方向 的 刻度 为 





换算 成 弧度 后 如 下 : 





[时针 的 弧度 = /6 X 小 时 +n/360 XX 分 钟 + x/21600 X 秒 

















因此 首先 根据 公式 计算 时 针 的 角度 ， 然 后 进行 绘制 。 相 关 JavaScript 代码 如 下 : 
<script> 
… 《代码 略 ) 
/ /绘制 时 钟 
function drawClock() { 
… (代码 略 》 第 
5 
章 
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/* 获 取 当 前 时 间 */ 
… 《代码 略 》 


/* 绘 制 时 针 */ 
// 保 存 当 前 绘图 状态 

ctx.save(); 

// 旋 转角 度 

ctx.rotate (h* (Math .PI/6)+ (Math.PI/360)*m+ (Math.PI/21600) * s); 
// 设 置 时 针 样 式 

ctx.lineWidth = 12; 

// 开 始 绘 制 时 针 路 径 
ctx.beginPath(); 
ctx.moveTo(-20, 0); 
ctx.lineTo(80, 0); 





// 描 边 路 径 
CtX.Stroke () 7 
// 恢 复 之 前 的 绘图 样式 
CtX.restore () 7 
} 
</script> 





这 里 首先 保存 了 绘图 状态 , 因为 时 针 需 要 单独 旋转 一 个 角度 ， 5 ent 


€ CQ Fphtml 三 


后 续 还 得 恢复 回来 。 首 先 根 据 公式 计算 出 当前 时 针 的 角度 ， 然 后 an 


开始 进行 绘制 。 时 针 长 度 为 100 像素 ， 由 距离 画布 中 心 _20 像素 一 

的 位 置 开始 ,绘制 到 离 中 心 80 像素 的 位 置 结束 ,最 后 使 用 restore0 | we 1 

方法 来 恢复 之 前 的 绘图 设置 。 i 
此 时 页 面 效果 如 图 5-5 所 示 。 i 
分 针 绘制 同样 需要 先 计 算 分 钟 的 偏 移 角度 。 以 12 点 的 方向 为 he 








参照 ， 当 前 分 针 所 指 旋转 的 角度 为 : 一 
图 5-5 在 画布 上 绘制 时 针 


分 针 的 角度 = 360/60 X 分 钟 + 360/60/60 X 秒 


换算 成 弧度 后 如 下 : 


分 针 的 弧度 = _r/30 X 分 钟 + x/1800 X 秒 


分 针 的 绘制 方式 与 时 针 完 全 一 样 ， 相 关 JavaScript 代码 如 下 : 








<script> 


… 《代码 略 》 
// 绘 制 时 钟 


function drawClock() { 


…〔 代 码 略 ) 


/* 绘 制 时 针 */ 
… 《代码 略 ) 





/* 绘 制 分 针 */ 
// 保 存 当 前 绘图 状态 


ctx.save(); 








// 旋 转角 度 


ctx.rotate((Math.PI / 30) * m + (Math.PI / 1800) * s); 


// 设 置 分 针 样 式 
ctx.lineWidth = 8; 
// 开 始 绘制 分 针 路 径 
ctx.beginPath () 7 
ctx.moveTo(-20, 0); 
ctx.lineTo(112, 0); 
// 描 边 路 径 
CtX.StFroke () > 
// 恢 复 之 前 的 绘图 样式 
CtX.restore () 7 
} 
</script> 





这 里 同样 需要 首先 保存 绘图 状态 ， 然 后 根据 公式 计算 出 当前 
分 针 的 角度 并 进行 绘制 。 分 针 长 度 为 132 像素 ， 由 距离 画布 中 心 
-20 像素 的 位 置 开始 ， 绘 制 到 离 中 心 112 像素 的 位 置 结束 。 最 后 
使 用 restore() 方 法 来 恢复 之 前 的 绘图 设置 。 

此 时 页 面 效 果 如 图 5-6 所 示 。 

最 后 绘制 秒针 ,同样 以 12 点 的 方向 为 参照 ， 当 前 秒针 所 指 旋 
转 的 角度 为 : 


分 针 的 角度 = 360/60 X 秒 


换算 成 弧度 后 如 下 : 





分 针 的 弧度 = x/30 X 秒 图 5-6 在 画布 上 绘制 分 针 


绘制 秒针 的 相关 JavaScript 代码 如 下 : 





<script> 


… (代码 略 ) 


// 绘 制 时钟 
function drawClock() { 


… 《代码 略 》 


/* 绘 制 分 针 */ 
… 《代码 略 》 


/* 绘 制 秒针 */ 

// 保 存 当 前 绘图 状态 
ctx.save(); 

// 设 置 当 前 旋转 的 角度 
ctx.rotate(s * Math.PI / 30); 
// 设 置 描 边 颜色 为 红色 
ctx.strokestyle = "red"; 
// 设 置 线条 粗细 为 6 像素 
ctx.lineWidth = 67 

// 开 始 绘 制 秒针 路 径 
ctx.beginPath (); 
ctx.moveTo(-30, 0); 
ctx.lineTo (120, 0); 


D Fe 
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// 描 边 路 径 
ctx.stroke(); 

// 设 置 填充 颜色 为 红色 
ctx.fillstyle = "red"; 
// 绘 制 画布 中 心 的 圆 点 
ctXx.beginPath () 7 


TEx are(t0,. © 
// 填 充 圆 点 为 红色 
人 
// 恢 复 之 前 的 绘图 样式 
ctx.restore(); 
} 
</script> 


10, 0, Math.PI * 2, true); 








这 里 同样 需要 首先 保存 绘图 状态 , 然后 根据 公式 计算 出 当前 
秒针 的 角度 并 进行 绘制 。 秒 针 长 度 为 150 像素 ， 由 距离 画布 中 心 
-30 像素 的 位 置 开 始 ， 绘 制 到 离 中 心 120 像素 的 位 置 结束 。 为 了 
区 别 将 绘制 秒针 的 画笔 粗细 减少 至 6 像素 ,并 将 颜色 更 换 为 红色 。 
同时 在 画布 中 心 绘制 一 个 半径 为 10 像素 的 实心 圆 作 为 固定 点 。 
最 后 使 用 restore() 方 法 来 恢复 之 前 的 绘图 设置 。 

此 时 页 面 效 果 如 图 5-7 所 示 。 

由 图 5-7 可 见 ， 当 前 时 钟 的 所 有 刻度 和 指针 均 已 经 完成 。 接 
下 来 为 界面 设计 最 后 一 部 分 内 容 ， 介 绍 如 何 绘制 时 钟 的 表盘 。 

4. 绘制 时 钟表 盘 

表盘 的 绘制 比 之 前 刻度 和 指针 的 绘制 相对 简单 ,只 需要 以 画 
布 中 心 为 圆 点 绘制 一 个 空心 圆 即 可 。 相 关 JavaScript 代码 如 下 : 


回 - -En 
| 手绘 时 种 x 
4 、C = 了 时 种 hml 辕 三 


手绘 时 钟 

















图 5-7 在 画布 上 绘制 秒针 





<script> 


… 《代码 略 》 


// 绘 制 时 钟 
function drawClock() { 


… 《代码 略 ) 


/* 绘 制 秒针 */ 
… 《代码 略 》 


/* 绘 制 表盘 */ 
// 设 置 样式 
ctXx.1ineWwidth = 12; 
ctx.strokestyle = "gray"; 
// 开 始 绘制 表盘 路 径 
ctx.beginpath (); 
FE 07 407 Ar 
// 描 边 路 径 
ctx.stroke(); 
// 恢 复 最 开始 的 绘图 状态 
ctx.restore(); 
} 
</script> 


Math.PI * 2, true); 





首先 将 画笔 粗细 设置 为 12 像素 ， 并 设置 描 边 颜色 为 灰色 ， 然 后 绘制 半径 为 140 像素 
的 空心 圆 。 这 里 由 于 最 开始 使 用 了 translate() 方 法 将 参照 点 从 默认 的 原点 (0.0) 移 动 到 了 画布 
中 心 坐标 (150.150)， 因 此 绘制 圆 弧 时 的 坐标 填写 的 是 (0.0)。 

此 时 页 面 效果 如 图 5-8 所 示 。 
由 图 5-8 可 见 ， 界 面 设计 已 经 全 部 完成 。 但 是 当前 只 是 一 个 静态 的 画面 效果 ， 秒 针 不 
会 随 着 时 间 的 变化 进行 移动 。 下 一 节 将 介绍 如 何 绘制 指针 的 动态 效果 。 
S.1.2 ”实时 更 新 效果 

本 节 主 要 介绍 如 何 实现 时 钟 指针 的 实时 更 新 效果 , 可 以 在 JavaScript 中 添加 setIntervalO 
方法 设置 刷新 画面 的 时 间 。 代 码 如 下 : 

setInterval ("drawClock()", 1000); 

上 述 代码 表示 每 1000 毫秒 重新 调用 一 次 drawClock0 方 法 进行 整个 画布 的 绘制 ， 其 中 
1000 毫秒 等 于 1 秒 。 

由 于 画布 的 绘制 原理 是 每 次 新 绘制 的 内 容 会 重合 在 上 方 ， 此 时 的 运行 效果 如 图 5-9 所 示 。 
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图 5-8 在 画布 上 绘制 表盘 图 5-9 未 清空 画布 的 错误 效果 
因此 需要 在 drawClock() 方 法 的 开始 部 分 添加 clearRect0 方 法 用 于 清空 画布 原先 的 所 有 
内 容 。 相 关 代 码 修改 后 如 下 : 


<script> 


… 《代码 略 》 








/ /绘制 时 钟 
function drawClock() { 
// 保 存 画 布 的 初始 绘制 状态 
ctx.save(); 
// 清 空 画布 
ctx.clearRect(0, 0, 300, 300); 


/* 设 置 画 笔 样式 和 位 置 */ 
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… 《代码 略 》 
} 
</script> 
重新 运行 则 动态 效果 可 以 正常 显示 ， 如 图 5-10 所 示 。 
回 - ”= EE 日 - -EN 
D #3 x D Ft x 
iS CQ 手绘 时 钟 .html 和 三 人 CGC Q 手绘 时 钟 .html Ba 
手绘 时 钟 手绘 时 钟 


























图 5-10 ”时钟 指针 的 动态 效果 


由 图 5-10 可 见 ， 时钟 的 指针 已 经 可 以 正 
时 更 新 。 至 此 ， 本 例题 已 全 部 完成 。 


S.1.3 完整 代码 展示 


完整 的 HTML5 代码 如 下 : 





运行， 同样 分 针 和 时 针 也 会 根据 实际 时 间 实 





i <!DOCTYPE HTML> 

<html> 

FE) <head> 

4 <meta charset="utf-8"> 

Ss <title> 手 绘 时 钟 </title> 

6 </head> 

| <body onload="drawClock()"> 

8 <h3> 手 绘 时 钟 </h3> 

9 <hr /> 

10. <canvas id="clockCanvas" width="300" height="300" style= 
"border:1lpx solid"> 

11. 对 不 起 ， 您 的 浏览 器 不 支持 HTML5 画 布 RPI。 

Le </canvas> 

3s <script> 

La // 根 据 id 找 到 指定 的 画布 

5 Var C = document .getElementById("clockCanvas"); 

16. // 创 建 2D 的 context 对 象 

Ws var ctx = c.getContext ("2d"); 

Les // 绘 制 时 钟 

9: function drawClock() { 

20. // 保 存 画布 的 初始 绘制 状态 


和 ctx.save(); 








FF // 清 空 画 布 











2 ctx.clearRect (0, 0, 300, 300); 

24. 

25% /* 设 置 画 笔 样 式 和 位 置 */ 

26. // 设 置 画布 中 心 为 参照 点 

FE ctx.translate(150, 150); 

288 // 以 画布 中 心 为 参照 点 逆 时 针 旋 转 90* 

29. ctx.rotate(-Math.PI / 2); 

30. // 设 置 画笔 线条 宽度 为 6 像素 

31. ctx.lineWidth = 67 

2 // 设 置 画 笔 线条 的 末端 为 圆 形 

33s ctx.lineCap = "round"; 

34. 

35: /* 画 12 个 小 时 的 刻度 */ 

36. // 循 环 12 次 ， 每 次 绘制 一 条 刻度 

本 下 for (var i = 0; i < 12; i++) { 

368-。 ctx.beginpath () 

359。 // 每 次 顺 时 针 旋 转 60° 

40. ctx.rotate (Math.PI / 6); 

41. / /绘制 刻度 线段 的 路 径 

42. ctx.moveTo(100, 0); 

A3s ctx.lineTo(120, 0); 

44. // 描 边 路 径 

45. ctx.stroke (); 

46. } 

47， 

48 . /* 画 60 分 钟 对 应 的 刻度 */ 

49. ctx.lineWidth = 5; 

S06 for (i=0; i< 60; i++) { 

Ls ctx.beginPath (); 

每 和 < ctx.moveTo(118, 0); 

53。 ctx.lineTo(120, 0); 

54. ctx.stroke(); 

55, ctx.rotate (Math.PI / 30); 

56s 人 

Ss 

58. /* 获 取 当 前 的 时 间 */ 

59. // 获 取 当 前 时 间 

60 . Var now = new Date () 7 

61 . // 获 取 当 前 第 几 秒 

E25 Var s = now.getseconds(); 

63. // 获 取 当 前 第 几 分 钟 

64. var m = now.getMinutes () 

65。 // 获 取 当 前 是 几 小 时 〈24 小 时 制 ) 

66. Var h = now.getHours (); 

67. // 将 小 时 换算 成 12 小 时 制 的 数值 

68. 4 2 

69. hh == 122 

70. 

了 /* 绘 制 时 针 */ 

了 和 // 保 存 当前 绘图 状态 

73， ctx.save(); 

74. // 旋 转角 度 

75. ctx.rotate (h* (Math.PI / 6) + (Math.PI / 360) *m+ (Math.PI 
/21600) * s); 

76. // 设 置 时 针 样式 5 
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Ts ctx.lineWidth = 12; 
78. // 开 始 绘制 时 针 路 径 

79 . ctx.beginPath () ; 

80 . ctx.moveTo(-20, 0); 
B81 ctx.lineTo(80, 0); 
82。 // 描 边 路 径 

83s ctx.stroke(); 

84. // 恢 复 之 前 的 绘图 样式 

85。 ctx.restore(); 

86. 

BR /* 绘 制 分 针 */ 

88. // 保 存 当前 绘图 状态 

69。 ctx.save(); 

90 . // 旋 转角 度 

Ds ctx.rotate((Math.PI / 30) * m+ (Math.PI / 1800) * s); 
92. // 设 置 分 针 样式 

93. ctx.lineWidth = 8; 

94. // 开 始 绘制 分 针 路 径 

95 .。 ctXx.beginPath () 

96. ctx.moveTo(-20, 0); 
a ctx.lineTo(112, 0); 
98. // 描 边 路 径 

99: CtX.Stroke () 

100 . // 恢 复 之 前 的 绘图 样式 

101.。 Ctx.restore()s 

L102s 

103. /* 绘 制 秒针 */ 

104. // 保 存 当前 绘图 状态 

105. ctx.save(); 

106. // 设 置 当前 旋转 的 角度 

107. ctx.rotate(s * Math.PI / 30); 
108. // 设 置 描 边 颜色 为 红色 

109. ctx.strokestyle = "red"; 
110. // 设 置 线条 粗细 为 6 像素 
LAs ctx.lineWidth = 6; 

了 3125 ctx.beginPath () ; 

3 ctx.moveTo(-30, 0); 
114. ctx.lineTo(120, 0); 
135。 ctx.stroke(); 

116. // 设 置 填充 颜色 为 红色 

市 和 ctx.fillstyle = "red"; 
本 6 // 绘 制 画布 中 心 的 圆 点 

119; ctx.beginPath () ; 

205 CtxX-arc(0，0，10，0，Math-.PI * 2, true); 
be // 填 充 圆 点 为 红色 

122。 ctx FEEL/(Y 

到 // 恢 复 之 前 的 绘图 样式 

124. ctx.restore(); 

29. 

126. /* 绘 制 表盘 */ 

提起 // 设 置 样式 

L285 ctx.lineWidth = 12; 
L293. ctx.strokestyle = "gray™; 
130. // 开 始 绘 制 表盘 路 径 

下 3 ctx.beginPath (); 


L332。 ctx.arc(0, 0, 140, 0, Math.PI * 2, true); 








[EE // 描 边 路 径 


134, ctx.stroke(); 

95: // 恢 复 最 开始 的 绘图 状态 

136 . ctx.restore(); 

137。 | 

138s setInterval ("drawClock()", 1000); 
139. </script> 

140. </body> 


141. </html> 





5.2 ”拼图 游戏 的 设计 与 实现 


【 例 5-2】 拼图 游戏 的 设计 与 实现 
功能 要 求 : 使 用 HTMLS5 画布 技术 制作 一 款 拼 图 小 游戏 ， 要 求 将 图 像 划 分 为 3X3 共 9 
块 方块 并 打 乱 排序 ， 用 户 可 以 移动 方块 拼 成 完整 图 片 。 效 果 如 图 5-11 所 示 。 
回 - = 本 本 
中 HTML5 面 布 综合 项 目 之 护 x 
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共计 时 间 : 00:00:01 


;二 





重新 开始 








图 5-11 在 页 面 上 创建 画布 


5.2.1 界面 设计 


本 节 主 要 介绍 拼图 游戏 的 页 面 布局 设计 ， 包 括 整 体 布局 设计 和 游戏 布局 设计 两 个 方面 。 

1. 整体 布局 设计 

首先 直接 使 用 一 个 区 域 元 素 <div> 在 页 面 背景 上 创建 游戏 界面 , 在 其 内 部 添加 标题 、 水 
平 线 并 预 留 游戏 空间 。 相 关 HIMLS 代码 片段 如 下 : 


<body> 5 
<div id="container"> 
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<!-- 页 面 标题 --> 
<h3>HTML5 画 布 综合 项 目 之 拼图 游戏 </h3> 
5 水平线 = 
hr /> 
<!-- 游 戏 内 容 --> 
</div> 
</body> 





该 段 代 码 为 <div> 元 素 定 义 了 id="container", 以 便 可 以 使 用 CSS 的 ID 选择 器 进行 样式 
设置 。 

本 例 使 用 CSS 外 部 样式 表 规 定 页 面 样式 。 在 本 地 css 文件 夹 中 创建 pintu.css 文件 ， 并 
在 <head> 首 尾 标签 中 声明 对 CSS 文件 的 引用 。 相 关 HIMLS 代码 片段 如 下 : 








<head> 

<meta charset="utf-8"> 

<title>HTML5 夯 布 综合 项 目 之 拼图 游戏 </title> 

<link rel="stylesheet" href="css/pintu.css"> 
</head> 





在 CSS 文件 中 为 d="container" 的 <div> 标 签 设置 样式 ， 具 体 样式 要 求 如 下 。 
。 颜色 : 背景 颜色 为 白色 ， 
。 尺寸 :宽度 为 600 像素 ; 
。 边 距 ， 各 边 的 内 边 距 为 20 像素 ， 各 边 的 外 边 距 定义 为 auto， 以 便 可 以 居中 显示 ; 
。 文本 : 居中 显示 ， 采 用 默认 字体 ; 
。 特殊 : 使 用 CSS3 技术 为 其 定义 边框 阴影 效果 ， 在 其 右 下 角 有 黑色 投影 。 
相关 CSS 代码 片段 如 下 : 
/* 设 置 游 戏 界面 样式 */ 
#container { 

background-color: white; 

width: 600px; 

margin: auto; 

padding: 20px; 

text-align: center; 

box-shadow: 1l0px 10pPx 1l5px black; 





} 


其 中 box-shadow 属性 可 以 实现 边框 投影 效果 ，4 个 参数 分 别 代表 水 平方 向 的 偏 移 〈 向 
右 偏 移 10 像素 )、 垂 直方 向 的 偏 移 〈 向 下 偏 移 10 像素 )、 阴 影 宽度 (15 像素 ) 和 阴影 颜色 
(黑色 )， 均 可 自 定义 成 其 他 值 。 该 属性 是 CSS3 新 特性 中 的 一 种 ， 在 这 里 仅 为 美化 页 面 做 
简单 使 用 。 


























由 于 网 页 的 背景 颜色 默认 为 白色 ， 与 <div> 元 素 设置 的 背景 颜色 相同 。 为 了 区 分 , 将 网 
页 的 背景 颜色 设置 为 银色 。 
相关 CSS 代码 片段 如 下 : 








此 时 页 面 效 果 如 图 5-12 所 示 。 
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图 5-12 在 页 面 上 创建 游戏 界面 


由 图 5-12 可 见 ， 关 于 <div> 标 签 的 样式 要 求 已 初步 实现 。 目 前 尚未 在 <div> 首 尾 标签 之 
间 填 充 游戏 相关 内 容 ， 因 此 在 网 页 上 浏览 没有 完整 效果 ， 需 等 待 后 续 补充 。 接 下 来 将 介绍 
如 何 进行 游戏 内 容 的 布局 设计 。 

2. 游戏 布局 设计 

下 面 主 要 介绍 如 何在 页 面 上 创建 完整 的 游戏 内 容 ， 包 括 游戏 计时 、 游 戏 画 布 和 “重新 
开始 ”按钮 3 个 部 分 。 

首先 在 <div> 元 素 的 预 留 区 域 添加 一 个 id="timeBox" 的 <div> 元 素 , 用 于 显示 游戏 计时 。 
在 其 中 先 初始 化 总 时 间 为 00:00:00， 并 将 时 间 文 本 嵌 套 在 一 个 id="time" 的 <span> 元 素 中 ， 
以 便 后 续 可 以 使 用 JavaScript 代码 动态 变更 时 间 内 容 。 相 关 HIMLS 代码 片段 如 下 : 

<body> 

<div id="container"> 
<!-- 页 面 标题 --> 
<h3>HTML5 画 布 综合 项 目 之 拼图 游戏 </h3> 


<!-- 水 平 线 --> 
<hr /> 


<!-- 游 戏 时 间 --> 
<div id="timeBox"> 
共计 时 间 : <span id="time">00:00:00</span> 
</div> 
</div> 
</body> 





其 中 <div> 和 <span> 标 签 的 id 名 称 均 可 以 根据 实际 情况 进行 自 定义 。 
在 CSS 文件 中 为 d="timeBox" 的 <div> 进 行 样式 设置 。 
。 边 距 : 上 、 下 外 边 距 为 10 像素 ， 左 、 右 外 边 距 为 0 像素 ; 
。 字体: 字体 大 小 为 18 像素 ， 采 用 默认 字体 风格 。 
相关 CSS 代码 片段 如 下 : 
/* 设 置 游戏 时 间 面 板 样式 */ 
#timeBox { 
margin: 1l0px 0; 


font-size: 18px; 
} 


接 下 来 使 用 <canvas> 标 签 制作 游戏 画布 ， 初 始 设置 其 宽度 和 高 度 均 为 300 像素 , 并 使 | 5 











HTML5 蚂 诊 4PI 项 月 


HTML5 网 页 碘 带 克 奢 笑 紫 











行内 样式 表 设置 该 画布 带 有 1 像素 宽 的 实 线 边框 效果 。 相 关 HTMLS5 代码 片段 如 下 : 


<body> 
<div id="container"> 


<!-- 页 面 标题 --> 
<h3>HTML5 画 布 综合 项 目 之 拼图 游戏 </h3> 














<I=- 水 平 线 -=> 

<hr /3 

<! 一 -游戏 时 间 代码 略 )》--> 
<!-- 游 戏 画 布 --> 


<canvas id="myCanvas" width="300" height="300" style="border: 
1px solid"> 
对 不 起 ， 您 的 浏览 器 不 支持 HTML5 画 布 API。 
</canvas> 
</div> 
</body> 


为 画布 标签 <canvas> 设 置 id="myCanvas"， 后 续 在 JavaScript 中 可 以 进行 绘制 工作 。 
最 后 使 用 <button> 标 签 制作 “重新 开始 ”按钮 。 相 关 HIMLS 代码 片段 如 下 : 


<body> 
<div id="container"> 
<!-- 页 面 标题 --> 
<h3>HTML5 画 布 综合 项 目 之 拼图 游戏 </h3> 
<!-- 水 平 线 --> 
<hr /> 
<!-- 游 戏 时 间 〈 代 码 略 ) --> 








<!-- 游 戏 画布 〈 代 码 略 ) --> 
<!-- 游 戏 按钮 --> 





<div> 
<button> 重 新 开始 </button> 
</div> 
</div> 
</body> 
当前 该 按钮 仅 用 于 布局 设计 ， 单 击 后 暂 无 响应 事件 。 后 续 会 在 JavaScript 中 为 其 增加 
回调 函数 。 


在 CSS 文件 中 为 按钮 标签 <button> 进 行 样式 设置 。 
。 尺寸 :宽度 为 200 像素 、 高 度 为 50 像素 ; 
。 边 距 : 上、 下 外 边 距 为 10 像素 ， 左 、 右 外 边 距 为 0 像素 ; 
。 边框 :无 边框 效果 ; 
。 字体 : 字体 大 小 为 25 像素 ， 加 粗 显示 ; 
。 颜色 : 字体 颜色 为 白色 ， 背 景 颜色 为 浅 珊瑚 红色 〈lightcoral)。 
相关 CSS 代码 片段 如 下 : 
/* 设 置 游 戏 按钮 样式 */ 
button { 
width: 200px; 
height: 50px; 
margin: 1l10px 0; 


border: 0; 
outline: none; 











font-size: 25px; 

font-weight: bold; 

color: white; 
background-color: lightcoral; 

















用 户 还 可 以 为 <button> 标 签 设置 鼠标 悬浮 时 的 样式 效果 ， 在 CSS 样式 表 中 上 
button:hover 表示 。 本 例 将 该 效果 设置 为 按钮 背景 颜色 的 改变 ， 换 成 颜色 加 深 的 珊瑚 红色 
(coral ) 。 
相关 CSS 代码 片段 如 下 : 

/* 设 置 鼠 标 悬 浮 时 的 按钮 样式 */ 


button:hover { 
background-color: coral; 























} 


此 时 整个 样式 设计 就 全 部 完成 了 ， 其 页 面 效 果 如 图 5-13 所 示 。 
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共计 时 间 : 00:00:00 














重新 开始 





图 5-13 ”拼图 游戏 的 页 面 布 局 样式 效果 图 
由 图 5-13 可 见 , 关于 拼图 游戏 的 布局 和 样式 要 求 已 初步 实现 。 目前 尚未 实现 游戏 好 辑 ， 
该 内 容 将 在 下 一 节 介绍 。 
S.2.2 ”实现 游戏 逻辑 
本 节 主 要 介绍 如 何 实现 游戏 逻辑 ， 包 括 以 下 内 容 : 
。 声明 画布 对 象 和 加 载 图 片 素材 ; 


。 将 图 片 素材 分 割 并 打 乱 排序 ; 
。 实现 鼠标 单 击 移动 拼图 方块 ; 
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。 实现 游戏 计时 功能 。 

1， 准 备 工作 

首先 获取 画布 和 2D 的 context 对 象 ， 以 便 可 以 进行 画布 的 绘制 工作 。 本 例 采用 了 内 间 
JS 代码 ， 相 关 JavaScript 代码 如 下 : 

// 获 取 画 布 对 象 

Var c = document .getElementById('myCanvas'); 


// 获 取 2D 的 context 对 象 


Var ctx = c.getContext ('2d"'); 


接 下 来 加 载 拼图 所 需 的 素材 图 片 。 当 前 使 用 的 图 片 来 源 于 本 地 image 文件 夹 中 的 
pintu.jpg。 相 关 JavaScript 代码 如 下 : 


// 声 明 拼图 的 图 片 素材 来 源 

var img = new Image () 7 
img.src = "image/pintu.jpg"; 
// 当 图 片 加 载 完 毕 时 

img.onload = function() { 


// 游 戏 相关 代码 











} 





为 了 保证 游戏 在 图 片 正常 加 载 完 毕 后 才 执 行 ,需要 将 其 写 在 onload 事 件 的 回调 函数 中 。 
2. 初始 化 拼图 画面 


本 例 需要 将 素材 图 片 分 割 成 3 行 3 列 的 9 个 小 方 
块 , 并 打 乱 顺 序 放置 在 画布 上 。 为 了 在 游戏 过 程 中 便 | oo | 01 | 02 | 
于 查找 当前 区 域 该 显示 图 片 中 的 哪 一 个 方块 ， 首 先 


为 原 图 片上 的 9 个 小 方块 区 域 进行 编号 ， 如 图 5-14 
由 图 5-14 可 见 ， 本 例 采 用 了 两 位 数字 为 原 图 片 


素材 上 的 方块 进行 标识 ,其 中 十 位 数 表示 第 几 行 , 个 
位 数 表示 第 几 列 ， 均 从 0 开始 计数 。 

在 JavaScript 中 声明 一 个 二 维 数组 用 于 记录 这 些 方块 图 片 的 标识 。 相 关 代码 如 下 : 
// 定 义 初始 方块 位 置 
Var num = [[00, 01, 02], [10, 11, 12], [20, 21, 22]]; 
每 3 个 元 素 为 一 组 表示 其 中 一 行 的 方块 标识 。 其 中 ， 二 维 数组 的 下 标 表示 画布 上 的 行 
与 列 ， 二 维 数组 的 数值 代表 原始 图 片上 的 切割 位 置 ， 同 样 都 是 从 0 开始 计数 的 。 

在 初始 情况 下 尚未 打 乱 拼图 方块 ， 因 此 当前 该 二 维 数组 对 应 的 标识 为 最 后 所 有 拼图 都 
处 于 正确 位 置 时 的 效果 。 例如 num[0][0] 指 的 是 画布 上 第 一 行 第 一 个 方块 的 位 置 ， 其 对 应 的 
值 当前 是 00， 表 示 该 位 置 的 方块 图 片 是 从 素材 图 片上 第 一 行 第 一 个 方块 的 位 置 切割 下 来 的 。 
在 JavaScript 中 声明 自 定 义 名 称 的 generateNum() 方 法 用 于 打 乱 拼图 顺序 。 思 路 是 在 这 
9 个 数值 中 随机 抽取 两 个 数据 ， 然 后 对 调 它们 的 位 置 。 在 进行 足够 多 次 数 的 对 调 后 基本 可 
以 实现 随机 打 乱 的 效果 。 

JavaScript 中 generateNum() 方 法 的 完整 代码 如 下 : 





图 5-14 拼图 游戏 的 界面 布局 样式 效果 图 



























// 打 乱 拼 图 的 位 置 
function generateNum() { 
// 循 环 50 次 进行 拼图 的 打 乱 
Eor (war 1 = 0 1 < 507 44 { 
// 随 机 抽取 其 中 一 个 数据 
var il = Math.round (Math.random() 
Var jl1 = Math.round (Math.random() 
// 再 随机 抽取 其 中 一 个 数据 
Var i2 = Math.round (Math.random() 
var j2 = Math.round (Math.random() 
// 对 调 它们 的 位 置 
var temp = num[i1] [j1]; 
num[i1] [j1] = num[i2] [j2]; 
num[i2] [j2] = temp; 





当前 使 用 for 循环 进行 了 50 次 打 乱 效果 ， 可 以 根据 实际 情况 更 改 循环 次 数 。 每 次 使 用 
Math.random() 方 法 随机 产生 两 个 数值 的 下 标 ， 然 后 对 其 进行 处 理 ， 使 得 最 终 的 随机 结果 必 
须 在 [0,2] 区 间 ， 接 着 将 二 维 数组 中 的 这 两 个 位 置 上 的 值 进 行 交换 。 

在 JavaScript 中 声明 自 定义 名 称 的 drawCanvas() 方 法 用 于 在 画布 上 绘制 打 乱 顺序 后 的 
图 片 。 使 用 本 章 介 绍 的 drawImage() 方 法 对 图 片 进行 切割 ， 并 放置 在 画布 的 指定 位 置 上 。 相 
关 JavaScript 代码 如 下 : 


// 定 义 拼图 小 方块 的 边 长 
var w = 100; 
// 绘 制 拼图 
function drawCanvas () { 
/7 清空 画布 
ctx.clearRect (0, 0, 300, 300); 
// 使 用 双重 for 循 环 绘制 3X 3 的 拼图 
for (var i = 0; i < 3; i++) { 
for(var ] = 0; j < 3; j++) { 
if (num[i][j] != 22) { 
// 获 取 数 值 的 十 位 数 ， 即 第 几 行 
Var row = parseInt (num[i] [j] / 10); 
// 获 取 数 组 的 个 位 数 ， 即 第 几 列 
var col = num[i]l[j] % 10; 
// 在 画布 的 相关 位 置 上 绘图 


ctx.drawImage (img, COl*W, rOW*W, W, W, Jj*W, i*W, W, W)? 











上 述 代 码 首 先 定义 了 切割 后 小 方块 的 边 长 为 100 像素 ， 在 后 面 多 处 会 用 到 。 接 着 使 用 
clearRect0 方 法 清空 画布 ， 以 免 有 重合 现象 。 然 后 使 用 双重 for 循环 绘制 3X3 的 拼图 ， 其 
中 i 表示 行 、j 表示 列 。 遍历 二 维 数组 num， 然 后 根据 当前 位 置 上 数值 的 十 位 数 和 个 位 数 分 
析 该 切割 原 素材 图 片上 的 区 域 。 为 了 保留 一 个 空白 区 域 用 于 移动 图 片 , 对 数值 为 22 的 所 在 
区 域 不 绘制 图 片 。 

其 中 drawImage() 方 法 中 的 参数 1 表示 需要 切割 的 图 片 素材 ; 参数 2 和 3 表示 的 是 切割 
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的 起 始点 位 置 坐标 ， 参 数 4 和 5 表示 的 是 切割 的 小 方块 的 宽度 和 高 度 ， 这 里 均 为 w; 参数 
6 和 7 表示 的 是 在 画布 绘制 的 起 始 位 置 坐标 ;参数 8 和 9 指 的 是 切割 下 来 的 图 片 在 画布 中 
缩放 的 宽度 和 高 度 。 这 里 由 于 素材 图 片 和 画布 均 为 300 像素 的 宽 高 ， 所 以 仍然 为 w， 表 示 
原 图 大 小 。 

将 generateNum() 和 drawCanvas() 方 法 添加 到 图 片 img 的 onload 事件 回调 函数 中 即 可 实 
现 拼 图 画面 。 相 关 JavaScript 代码 如 下 : 
// 当 图 片 加 载 完毕 时 
img.onload = function() { 

// 打 乱 拼图 的 位 置 
generateNum() 


// 在 画布 上 绘制 拼图 
drawCanvas (); 















} 


运行 效果 如 图 5-15 所 示 。 
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图 5-15 ”拼图 游戏 的 初始 画面 


由 图 5-15 可 见 ,拼图 游戏 的 初始 画面 已 经 初步 实现 。 由 于 每 次 开局 的 拼图 方块 的 顺序 
为 随机 打 乱 ， 所 以 运行 时 可 能 会 产生 和 截图 不 一 样 的 效果 。 

3. 通过 鼠标 单 击 移动 拼图 

游戏 的 规则 是 使 用 鼠标 单 击 的 方式 来 移动 拼图 方块 。 当 鼠标 单 击 了 需要 移动 的 方块 
时 ， 如 果 该 方块 相 邻 的 地 方 存在 空白 区 域 ， 则 该 方块 移动 到 空白 区 域 的 位 置 。 如 果 鼠 标 直 
接 单 击 了 画布 中 的 空白 区 域 或 单 击 的 区 域 已 经 超出 了 画布 范围 则 无 效 。 

首先 为 画布 对 象 声 明 鼠标 单 击 事件 onmousedown 的 回调 函数 , 一 旦 单 击 了 鼠标 ， 则 立 
刻 获 取 鼠 标 在 画布 上 的 坐标 。 相 关 JavaScript 代码 片段 如 下 : 


// 监 听 鼠 标 单 击 事件 























c.onmousedown = function(e) { 
// 获 取 画 布 边界 
Var bound = c.getBoundingClientRect (); 
// 获 取 鼠 标 在 画布 上 的 坐标 位 置 (x, y) 
Var x = e.pageX - bound.left; 
Var y = e.pageY - bound.top; 


// 将 x 和 y 换 算 成 几 行 几 列 
Var row = parseInt(y / w); 
Var col = parseInt (x / w); 





} 


由 于 直接 使 用 epageX 和 epageY 获取 到 的 鼠标 单 击 坐标 是 相对 于 整个 页 面 左 上 角 的 
位 置 坐 标 ， 所 以 还 得 用 getBoundingClientRect() 方 法 获取 画布 的 边界 ， 然 后 换算 成 画布 上 的 
相对 坐标 位 置 (x,y)。 此 时 只 需要 将 坐标 除 以 拼图 小 方块 的 边 长 w 即 可 换算 出 鼠标 单 击 的 是 
第 几 行 第 几 列 的 拼图 方块 。 

由 于 只 对 画布 做 了 鼠标 单 击 事件 的 监听 ， 因 此 只 需要 考虑 当前 单 击 的 是 否 为 画布 上 的 
空白 区 域 , 无 须 关 注 鼠 标 是 否 单 击 了 画布 以 外 的 范围 。 对 鼠标 单 击 事件 onmousedown 的 回 
调 函 数 做 进一步 代码 补充 ， 相 关 JavaScript 代码 片段 如 下 : 

// 监 听 鼠 标 单 击 事件 

c.onmousedown = function(e) { 

// 获 取 画 布 边界 《代码 略 ) 

// 获 取 鼠 标 在 画布 上 的 坐标 位 置 (x, y) 〈 代 码 略 》 

// 将 x 和 Yy 换 算 成 几 行 几 列 〈 代 码 略 ) 





























// 如 果 当 前 单 击 的 不 是 空白 区 域 

if (num[row] [col] != 22) { 
// 移 动 单 击 的 方块 
detectBox (row, col) : 
// 重 新 绘制 画布 
drawCanvas () 








在 这 里 使 用 站 语句 判断 了 单 击 的 位 置 是 否 为 空白 区 域 ,如 果 不 是 则 尝试 移动 当前 方块 ， 
并 重新 绘制 画布 内 容 。 这 里 先 自 定义 了 一 个 函数 detectBox0 用 于 检测 是 否 可 以 移动 当前 方 
块 ， 如 果 可 以 则 进行 数据 的 对 调 ， 后 面 将 补充 该 函数 内 容 。detectBox() 执 行 完 毕 后 调用 之 
前 的 drawCanvas() 方 法 重新 绘制 画布 内 容 。 
在 JavaScript 中 声明 detectBox0 方 法 用 于 检测 是 否 可 以 移动 当前 图 片 。 使 用 参数 i 和 j 
分 别传 递 当前 鼠标 单 击 所 在 画布 的 行 与 列 。 对 当前 单 击 的 位 置 分 别 判断 上 、 下 、 左 、 右 4 
个 方位 的 相 邻 位 置 是 否 存在 空白 区 域 ， 如 果 存 在 则 移动 到 空白 区 域 。 
JavaScript 中 detectBox() 方 法 的 完整 代码 如 下 : 
// 移 动 单 击 的 方块 
function detectBox(i, j) { 
// 如 果 单 击 的 方块 不 在 最 上 面 一 行 
0 A 
// 检 测 空白 区 域 是 否 在 当前 方块 的 正 上 方 
if (numli-14]] == 22) 拭 
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// 交 换 空白 区 域 与 当前 方块 的 位 置 
num[i-1] [j] = num[i][j]; 
num[i][j] = 22; 
return; 

} 


} 
// 如 果 单 击 的 方块 不 在 最 下 面 一 行 
让 这 玉生 
// 检 测 空白 区 域 是 否 在 当前 方块 的 正 下 方 
if (num[i+1][j] == 22) { 
// 交 换 空 E 白 区 域 与 当前 方块 的 位 辕 
num[i+1] [j] = num[i] [j]; 
num[i][j] = 22; 
return; 





} 


} 
eh 列 
2 (1 30 


// 检 测 空 和 区 城 在 当前 广 交友 

if (num[i][j - 1] == 22 
/交换 空 昌 区 域 与 当前 方 区 的 位 置 
num[i][j - 1] = num[i] [j]; 
num[i][j] = 22; 
return; 

} 


} 
《40 
5 人 二 过 
/检测 本 白 区 域 是 的 
EE a + 
轨 忆 下 自 民 域 二 当前 方 和 的 位 轩 
2 二 = uml] (3s 
num[i] [j] = 22; 
return; 





其 中 需要 注意 当 方块 分 别 位 于 上 、 下 、 左 、 右 的 边界 位 置 时 仅 需 要 判断 另外 3 个 方向 
的 相 邻 位 置 上 是 否 有 空白 区 域 存在 。 
运行 效果 如 图 5-16 所 示 。 
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(a) 拼图 移动 前 的 效果 图 (b) 拼图 移动 后 的 效果 图 
图 5-16 拼图 游戏 的 游戏 过 程 画 面 


由 图 5-16 可 见 ， 已 实现 单 击 鼠 标 进行 拼图 移动 的 游戏 效果 。 接 下 来 将 介绍 如 何 实现 游 
戏 的 计时 功能 。 

4. 游戏 计时 功能 的 实现 

在 JavaScript 中 声明 自 定义 函数 getCurrentTimeO 用 于 进行 游戏 计时 。 当 开始 游戏 时 ， 
计时 功能 自动 开启 并 每 秒 执行 一 次 该 函数 ， 将 秒 数 增加 1。 

JavaScript 中 getCurrentTime() 方 法 的 完整 代码 如 下 : 

// 获 取 游 戏 计时 文本 区 域 对 象 

Var time = document .getElementById ("time"); 


/1 初始 化 计时 器 的 时 、 分 、 秒 


var h= 0,m= 0,s = 0; 














function getCurrentTime() { 
// 将 时 、 分 、 秒 转换 为 整数 以 便 进行 自 增 或 赋值 


s = parseInt (s); 


m = parseInt (m); 
h = parseInt (h); 
// 每 秒 变量 s 先 自 增 1 
S++ 
if (s == 60) { 
// 如 果 秒 已 经 达到 60， 则 归 0 
天 :二 :站 
// 分 钟 自 增 1 
ITn+ 二 7 


if (m == 60) { 
// 如 果 分 钟 也 达到 60， 则 归 0 
m= 0; 
// 小 时 自 增 1 
h++7 


上 


// 修 改 时 、 分 、 秒 的 显示 效果 ， 使 其 保持 两 位 数 
if (s < 10) 
S= "0"+Ss; 
if (m < 10) 
m= "0" +m; 
if (h < 10) 
hh = "0 + hs 
// 将 当前 计时 的 时 间 显 示 在 页 面 上 
time.innerHTML =h+":"+m+i":"+Ss; 
} 


首先 初始 化 当前 计时 的 时 、 分 、 秒 均 为 0， 然 后 使 用 parseInt0 方 法 将 其 转换 为 数值 以 
便 进行 计算 和 赋值 。 计 时 的 思路 是 每 次 执行 该 函数 方法 首先 将 秒 数 自 增 1， 然 后 判断 当前 
秒 数 是 否 已 达到 了 60， 如 果 是 则 归 0， 并 将 分 钟 自 增 1。 以 此 类 推 ， 直 到 小 时 被 增加 。 最 
后 将 文字 内 容 处 理 后 显示 在 游戏 界面 的 计时 区 域 。 

此 时 还 不 能 进行 自动 计时 ， 需 要 在 JavaScript 中 使 用 setInterval0 方 法 每 隔 1 秒 钟 调用 | 5 


























HTML5 蚂 硕 4PI 项 月 


HTML5 克 页 户 纲 族 矿 实战 


getCurrentTime() 方 法 一 次 ， 以 实现 更 新 效果 。 写 法 如 下 : 





// 每 隔 1000 毫 秒 (1 秒 ) 刷新 一 次 时 间 


Var timer = setInterval ("getCurrentTime()", 1000); 





这 里 使 用 了 自 定义 名 称 的 变量 timer 保存 当前 的 计时 器 ， 以 便 可 以 在 指定 的 时 间 使 用 
clearInterval(timer) 方 法 停止 该 计时 器 。 
运行 效果 如 图 5-17 所 示 。 
六 HTML5 画 布 综合 项 目 之 扩 x 
CQ 拼图 游戏 .html 9 三 
HTML5 画 布 综合 项 目 之 拼图 游戏 


共计 时 间 : 00:00:06 








图 5-17 拼图 游戏 的 游戏 计时 功能 


由 图 5-17 可 见 ， 当 前 计时 功能 已 实现 。 每 当 刷新 当前 页 面 ， 计 时 都 会 伴随 游戏 一 起 重 
新 开始 。 


S.2.3 游戏 成 功 与 重新 开始 


本 节 主 要 介绍 如 何 判定 游戏 结束 ， 包 括 以 下 内 容 : 

。 游戏 成 功 的 判定 与 显示 效果 的 实现 ; 

。 重新 开始 功能 的 实现 。 

1. 游戏 成 功 的 判定 与 显示 效果 的 实现 

在 JavaScript 中 声明 自 定义 函数 checkWin0 用 于 进行 游戏 成 功 的 判断 。 使 用 双重 for 循 
环 遍 历 所 有 方块 ， 对 比方 块 的 标记 值 和 位 置 是 否 能 对 应 。 当 游戏 成 功 时 ， 应 该 所 有 方块 的 
行 和 列 对 应 其 数值 中 的 十 位 数 和 个 位 数 。 

JavaScript 中 checkWin0 函 数 的 相关 代码 如 下 : 


// 胜 利 的 判断 
function checkWin () { 











// 使 用 双重 for 循 环 遍历 整个 数组 


for (var 1 = 0;7 1 < 37 it { 


for (var j] = 0; j] < 3; j++) { 
/ /如果 有 其 中 一 块 方块 的 位 置 不 对 
if (num[i][j] != i*10 +j){ 
// 返 回 假 


return false; 
} 


} 

// 返 回 真 

return true; 
} 


checkWin() 函 数 会 根据 判断 结果 返回 一 个 布尔 值 。 如 果 所 有 拼图 方块 的 位 置 正确 ， 返 
回 真 〈trme)， 否 则 返回 假 (false)。 
将 checkWin0 函 数 使 用 到 鼠标 单 击 事件 的 监听 回调 函数 中 。 相 关 代码 片段 修改 后 如 下 : 








// 监 听 鼠 标 单 击 事件 


c.onmousedown = function(e) { 
// 获 取 画 布 边界 代码 略 》 
// 获 取 鼠 标 在 画布 上 的 坐标 位 置 (x, y) 《代码 略 》 
// 将 x 和 y 换 算 成 几 行 几 列 代码 略 》 


A/ 如果 当前 单 击 的 不 是 空白 区 域 

if (num[row] [col] != 22) { 
// 移 动 单 击 的 方块 (代码 略 》 
// 重 新 绘制 画布 (代码 略 》 


// 检 查 游戏 是 否 成 功 

Var isWin = checkWin(); 

// 如 果 游 戏 成 功 

if (iswin) { 
// 清 除 计时 器 
clearInterval (timer); 
/ /绘制 完 整 图 片 
ctx.drawImage (img, 0, 0); 
// 设 置 字体 为 serif， 加 粗 、68 号 字 
ctx.font = "bold 68px serif"; 


// 设 置 填充 颜色 为 红色 
ctx.fillstyle = "red"; 
// 显 示 提示 语句 


ctx.fillText ("游戏 成 功 ! "，20，150); 
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每 次 重新 绘制 画布 后 调用 checkWin0 方 法 检查 游戏 是 否 已 成 功 ， 如 果 成 功 则 使 
clearInterval( 方 法 清除 计时 器 。 然 后 在 画布 上 绘制 完整 图 片 ， 并 使 用 flTextO 方 法 绘制 出 
“游戏 成 功 ”的 字样 。 

运行 效果 如 图 5-18 所 示 。 
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共计 时 间 ，00:00:22 


重新 开始 


图 5-18 拼图 游戏 成 功 的 判断 


2. 重新 开始 功能 的 实现 

为 “重新 开始 ”按钮 提供 单 击 事件 onclick="restartGame()"， 其 中 restartGame() 方 法 名 
称 可 自 定义 ， 该 函数 需要 在 JavaScript 中 声明 。 

“重新 开始 ”按钮 添加 单 击 事件 后 的 相关 HIML5 代码 片段 如 下 : 


<button onclick="restartGame () "> 重新 开始 </button> 








在 JavaScript 中 声明 restartGame() 方 法 ,用 于 重新 开始 游戏 , 包括 计时 器 重启 、 重 新 打 
乱 拼 图 顺序 和 重新 绘制 画布 内 容 3 个 部 分 。 相 关 JavaScript 代码 片段 如 下 : 


// 重 新 开始 游戏 

function restartGame() { 
// 清 除 计时 器 
clearInterval (timer); 
// 时 间 清 堆 
s= 0; 





m 0; 

h 07 

// 重 新 显示 时 间 

getCurrentTime (); 

timer = setInterval ("getCurrentTime()", 1000); 





// 重 新 打 乱 拼图 顺序 


generateNum () 7 





/7 绘制 拼图 


drawCanvas () 7 





其 中 重新 打 乱 拼图 顺序 和 重新 绘制 拼图 均 可 分 别 调用 之 前 已 实现 的 函数 generateNum() 
和 drawCanvas()。 
运行 效果 如 图 5-19 所 示 。 
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HTML5 画 布 综合 项 目 之 拼图 游戏 HTML5 西 布 综合 项 目 之 折 图 游戏 


共计 时 间 。00:00:22 共计 时 间 00:00:02 


一 一 


(a) 游戏 成 功 画面 (b) 游戏 重新 开始 画面 
图 5-19 拼图 游戏 的 重新 开始 功能 





由 图 5-19 可 见 ， 当 游戏 成 功 时 单 击 “ 重 新 开始 ”按钮 可 以 得 到 一 个 新 的 打 乱 顺序 的 拼 
图 布局 ， 并 且 计时 器 也 重新 从 0 开始 计时 。 至 此 ， 拼 图 游戏 的 全 部 功能 均 已 实现 。 开 发 者 
在 使 用 时 可 以 根据 实际 需要 将 该 代码 修改 为 4x4 甚至 分 割 更 细 的 拼图 样式 。 


S.2.4 完整 代码 展示 


HTMLS 完整 代码 如 下 : 








<!DOCTYPE HTML> 

2 <html> 

3 <head> 

4. <meta charset="utf-8"> 

Si <title>HTML5 夯 布 综合 项 目 之 拼图 游戏 </title> 

6 <link rel="stylesheet" href="css/pintu.css"> 

2 <script src="js/pintu.js"></script> 

8 </head> 

9 <body> 

Ls <div id="container"> 

1 <h3>HTML5 画 布 综合 项 目 之 拼图 游戏 </h3> 

2: <hr /> 

3 <div id="timeBox"> 

3145 共计 时 间 : <span id="time">00:00:00</span> 

5 </div> 

6 <canvas id="myCanvas" width="300" height="300" style= 第 
"border:1px solid"> 

和 对 不 起 ， 您 的 浏览 器 不 支持 HTML5 夯 布 API。 5 
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18. </canvas> 

19。 <div> 

2 <button onclick="restartGame () "> 

21: 重新 开始 

25 </button> 

es </div> 

24. </div> 

4 光 <script> 

26: // 获 取 画 布 对 象 

全 和 Var c = document .getElementById('myCanvas'); 

2 // 获 取 2D 的 context 对 象 

4 Var ctx = c.getContext ('2d'); 

30. 

3 // 定 义 拼图 小 方块 的 边 长 

3 var w = 100; 

33. // 定 义 初始 方块 位 置 

34. a nam. = [100, Of: O21 10, I; WI 20 21. 2211 

35 

36. // 声 明 拼图 的 图 片 素材 来 源 

汪汪 var img = new Image () 7 

38 . img .srC "image/pintu.jpg"; 

39. // 当 图 片 加 载 完 毕 时 

40. img.onload = function() { 

4 // 打 乱 拼 图 的 位 置 

42. generateNum(); 

43. // 在 画布 上 绘制 拼图 

44. drawCanvas (); 

45. } 

46. 

47. // 打 乱 拼 图 的 位 置 

48. function generateNum() { 

49. for (var i = 0; i < 50; i++) { 

S50 var il = Math.round (Math.random() * 2); 

0 var j1 = Math.round (Math.random() * 2); 

52 var i2 = Math.round (Math.random() * 2); 

Ds var j2 = Math.round (Math.random() * 2); 

54. var temp = num[il] [j1]; 

55. num[i1] [j1] = num[i2] [j2]; 

56. num[i2] [j2] = temp; 

ST 人 

58.。 } 

59. // 绘 制 拼图 

60. function drawCanvas() { 

61. // 清 空 画 布 

62. ctx.clearRect (0, 0, 300, 300); 

63 . // 使 用 双重 for 循 环 绘制 3X 3 的 拼图 

64. for (var i = 0; i < 3; i++) { 

65. for (var j = 0; j < 3; j++) { 

66. if (num[i][j] != 22) { 

67.. Var row = parseInt (num[i] [j] / 10); 

68. var col = num[i][j] % 10; 

69. ctx.drawImage (img, Col * W, IOW * W,W,W, j] * 
W, i* W, W, Ww); 

70. } 

Es } 

72. } 








75 // 监 听 鼠 标 单 击 事件 





76. c.onmousedown = function(e) { 

// 获 取 画 布 边界 

78 . Var bound = c.getBoundingClientRect () 7 
79. // 获 取 鼠 标 在 画布 上 的 坐标 位 置 (x, y) 

80. Var x = e.pageX - bound.left; 

Bl Var y = e.pageY - bound.top; 

8256 

3 // 将 x 和 y 换 算 成 几 行 几 列 

84. Var row = parseInt(y / 100); 

85. Var col = parseInt (x / 100); 

86. 

87. // 如 果 当 前 单 击 的 不 是 空白 区 域 

88 . if (num[row] [col] != 22) { 

89 . // 移 动 单 击 的 方块 

90 . detectBox (row, col) 7 

91. // 重 新 绘制 画布 

2 drawCanvas () 7 

93 . // 检 查 游戏 是 否 成 功 

3985 var isWin = checkWin(); 

95. / /如果 游 戏 成 功 

96. if (isWin) { 

97 . // 清 除 计时 器 

98。 ClearInterval (timer); 

99. / /绘制 完 整 图片 

100. ctx.drawImage (img, 0, 0); 
101. // 设 置 字 体 为 serif， 加 粗 、68 号 字 
102。 ctx.font = "bold 68px serif"; 
103. // 设 置 填充 颜色 为 红色 

104. ctx.fillstyle = "red"; 

105. // 显 示 提示 语句 

106. ctx.fillText ("游戏 成 功 ! "，20，150); 
LT07.. } 

108. } 

109. } 

L110 

TE // 移 动 单 击 的 方块 

EE function detectBox(i, j) { 

Ll, // 如 果 单 击 的 方块 不 在 最 上 面 一 行 

和 if (i > 0) { 

1 // 检 测 空白 区 域 是 否 在 当前 方块 的 正 上 方 
116. if (num[i-1][j] == 22) { 

TT // 交 换 空白 区 域 与 当前 方块 的 位 置 
118 . num[i-1] [j] = num[i]l [(j]; 
9 num[i] [j] = 22; 

120。 return; 

121, } 

E22 上 

Ls // 如 果 单 击 的 方块 不 在 最 下 面 一 行 

124. 二 下 让- 过 号 汪 

L295 // 检 测 空白 区 域 是 否 在 当前 方块 的 正 下 方 
126. if (num[i+1] [j] == 22) { 

Ths // 交 换 空白 区 域 与 当前 方块 的 位 置 
128. num[i+1] [j] = num[i] [j]; 第 
下 之 全 5 num[i] [j] = 22; 5 
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二 7 和 
1 了 72 
73- 
174. 
75 
176-。 
177。 
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180. 
181: 
182. 
183. 
184. 
185: 
186- 


return; 
} 
} 
// 如 果 单 击 的 方块 不 在 最 左边 一 列 
入 本 之 0 于 
// 检 测 空白 区 域 是 否 在 当前 方块 的 左边 
if (num[i][j - 1] rr 
// 交 换 空白 区 域 与 当前 方块 的 位 置 





num[i][j - 1] = num[i][j]; 
num[i] [j] = 22; 
return; 


} 


} 

// 如 果 单 击 的 方块 不 在 最 右边 一 列 

人 和 2 
// 检 测 空白 区 域 是 否 在 当前 方块 的 右边 
if (num[il[j + 1] 





// 交 换 空白 区 域 与 科 置 
num[il[] + 1] = num[i] [j]; 
num[i][j] = 22; 
return; 
} 
} 
} 
// 胜 利 的 判断 


function checkWin() { 
// 使 用 双重 for 循 环 遍历 整个 数组 
for (var i = 0; i < 3; i++) { 
for (var ] = 0; j < 3; j++) { 
// 如 果 有 其 中 一 块 方块 的 位 置 不 对 
if (num[i][j] != i* 10 +j) { 
// 返 回 假 


return false; 


} 
} 
// 返 回 真 
return true; 
} 


Var time = document .getElementById ("time"); 
// 初 始 化 计时 器 的 时 、 分 、 秒 

var h = 0, 

大 二 -0 

S: 二 QF 


function getCurrentTime() { 
hh 分 、 秒 转换 为 整数 以 便 进 行 自 增 或 赋值 
parseInt (s); 
parseInt (m); 
parseInt (h); 


m 
h 


// 每 秒 变量 s 先 自 增 1 
S44 二? 
if (8 60) 
// 如 果 秒 已 经 达到 60， 则 归 0 














87s s= 0 

188. // 分 钟 自 增 1 

189。 In+ 十 7 

190。 烛 

5 if (m== 60) { 

192。 // 如 果 分 钟 也 达到 60， 则 归 0 
193。 m= 0; 

194. // 小 时 自 增 1 

195。 和 

L9Gs } 

197s 

198 . // 修 改 时 、 分 、 秘 的 显示 效果 ， 使 其 保持 两 位 数 
199s 和 

200 . 5S5= "0" + SS; 

Os if (m < 10) 

202。 m= "0" + m7 

203 . 站 0 

204. h = "0" 于 hs 

205. // 将 当前 计时 的 时 间 显示 在 页 面 上 
206. time.innerHTML =h+":"+m+":"+Ss; 
207。 } 

208. 

209. // 重 新 开始 游戏 

210 . function restartGame () { 
31 // 清 除 计 时 器 

2 clearInterval (timer); 
213. // 时 间 清 零 

214. Ss=0; 

1 m= 0; 

216. hh ="0F 

21T // 重 新 显示 时 间 

218 . getCurrentTime () 7 

219。 timer = setInterval ("getCurrentTime()", 1000); 
220s 

2 // 重 新 打 乱 拼图 顺序 

Ss generateNum(); 

36 // 绘 制 拼图 

FM drawCanvas (); 

2 } 

226 

227 // 每 隔 1000 毫 秒 (1 秒 ) 刷新 一 次 时 间 
228. Var timer = setInterval ("getCurrentTime()", 1000); 
多 </script> 

230. </body> 

231.</html> 

完整 的 CSS 代码 如 下 : 

全 = body { 

background-color: silver; 

3. } 

着 #container { 

- text-align: center; 

6. margin: auto; 

了、 padding: 0; 

8 . background-color: white; 

s width: 600px; 

0. padding: 20px; 
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box-shadow: lO0px l0px 1l5px black; 


#timeBox { 
margin: 10px 0; 
font-size: 18px; 


和 
button { 
width: 
height: 
margin: 
border: 
font-size: 25px; 
font-weight: bold; 
color: white; 
outline: none; 
background-color: lightcoral; 
} 
button:hover { 
background-color: coral; 
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本 章 主要 包含 了 两 个 基于 HTML5 媒体 API 的 应 用 设计 实例 ， 一 是 基于 HTML5 音频 
API 的 音乐 播放 器 的 设计 与 实现 ， 二 是 基于 HTMLS5 视频 API 的 在 线 教学 视频 的 设计 与 实 
现 。 在 音乐 播放 器 项 目 中 ， 主 要 难点 为 音频 文件 的 载 入 以 及 控件 功能 的 实现 ， 在 线 教学 视 





本 章 学 习 目 标 : 
。 学 习 如 何 综合 应 用 HTMLS5 音频 API、CSS 与 JavaScript 开发 音乐 播放 器 项 目 ; 
。 学 习 如 何 综 合 应 用 HTML5 视频 API、CSS 与 JavaScript 开发 在 线 教学 视频 项 目 。 


6.1 音乐 播放 器 的 设计 与 实现 


【 例 6-1】 音乐 播放 器 的 设计 与 实现 
功能 要 求 : 设计 一 款 基于 HIMLS 音频 技术 的 音乐 播放 器 ， 要 求实 现 音乐 的 播放 、 暂 
停 、 音 量 大 小 调节 、 上 一 首 和 下 一 首 切换 。 
最 终 效果 如 图 6-1 所 示 。 TE 
如 图 6-1 所 示 ， 封 面 图 片 为 一 张 仿 CD 样式 的 圆 形 图 案 ， 下 wns 
面 为 3 行内 容 ， 分 别 是 音量 调节 进度 条 、 歌 曲名 称 展示 和 音乐 播 
放 控制 按钮 。 音乐 播放 控制 按钮 目前 主要 是 “上 一 首 ” 按 钮 “ 播 
放 / 暂 停 ” 按 钮 以 及 “下 一 首 ” 按 钮 。 
6.1.1 界面 设计 


本 节 主 要 介绍 音乐 播放 器 的 网 页 布局 和 样式 设计 , 包括 使 用 
<div> 标 签 划分 区 域 、 使 用 <img> 标 签 制作 CD 图 片 、 使 用 <input> 的 下: 小 








标签 制作 音量 进度 条 以 及 使 用 <button> 标 签 制作 音乐 播放 器 系列 9 
按钮 ， 配 合 CSS 样式 完成 整个 页 面 设计 效果 。 一 一 一 一 一 
1， 使 用 <div> 标 签 划分 区 域 图 6-1 音乐 播放 器 效果 图 


可 以 使 用 块 级 标签 <div> 区 分 4 个 不 同 的 版 块 : 中 仿 CD 图 案 ; 四 音量 调节 进度 条 ; 
图 歌曲 名 称 的 显示 ; 四 音乐 播放 器 相关 按钮 。 相 关 HIMLS 代码 片段 如 下 : 
<body> 


<h3> 简 单 音乐 播放 器 </h3> 
<hr /> 


<!-- 仿 CD 样式 圆 形 图 片 --> 


<div id="CDimage"></div> 
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<!-- 音 量 调节 进度 条 --> 
<div></div> 


<!-- 显 示 歌 曲名 称 --> 
<div></div> 


<!-- 音 乐 播放 器 按钮 一 > 
<div></div> 
</body> 


此 时 还 需要 CSS 文件 辅助 泻 染 样式 ,因此 在 本 地 css 文件 夹 中 创建 music.css 文件 ,并 
在 <head> 首 尾 标签 中 声明 对 CSS 文件 的 引用 。 相 关 HTMLS5 代码 片段 如 下 : 
<head> 

<meta charset="utf-8"> 

<title> 简 单 音乐 播放 器 </title> 

<link rel="stylesheet" href="css/music.css"> 
</head> 
在 CSS 文件 中 为 <div> 标 签 预 设 统一 样式 : 内 容 居中 显示 、 外 边 距 10 像素 。 相 关 CSS 
代码 片段 如 下 : 
divt{ 

text-align:center; 

margin:10px; 




















} 


此 时 尚未 在 各 个 <div> 首 尾 标签 之 间 填 充 内 容 , 因此 在 网 页 上 浏览 没有 实际 效果 , 需 等 
待 后 续 补充 。 

2. 使 用 <img> 标 签 制作 CD 图 片 

本 例 使 用 了 本 地 image 文件 夹 中 的 skyjpg 图 片 作为 音乐 播放 的 CD 图 片 样式 ， 图 片 初 
始 宽度 和 高 度 均 为 300 像素 。 相 关 HTMLS5 代码 片段 如 下 : 


<div id="CDimage"> 


<img src="image/sky.jpg" /> 
</div> 
因 图 片 宽 高 符合 设计 要 求 ， 故 无 须 在 <img> 标 签 中 进行 width (宽度 ) 和 height (高 度 ) 
属性 的 设置 。 如 果 选 用 的 是 未 经 过 处 理 的 其 他 长 宽 比 例 的 图 片 ， 可 以 用 这 两 个 属性 进行 约 
束 。 同 时 为 了 方便 后 续 的 CSS 样式 演 染 ,为 当前 的 块 级 元 素 <div> 设 置 了 id 名 称 为 CDimage， 
该 名 称 可 以 自 定义 。 

此 时 图 片 还 是 方形 的 样式 ， 为 了 方便 最 终 形 成 圆 形 效果 有 两 种 解决 方案 : 一 是 直接 使 
经 过 PS 处 理 的 图 片 ， 做 成 背景 透明 的 png 文件 格式 即 可 ; 二 是 无 须 PS 图 像 处 理 技术 ， 
直接 使 用 CSS3 技术 在 music.css 文件 中 对 该 图 片 进行 设置 。 

使 用 CSS3 技术 设置 圆 形 图 案 的 相关 CSS 代码 片段 如 下 : 


#CDimage imgt{ 
border-radius:50%; 









































} 
本 例 用 到 了 CSS3 技术 中 的 border-radius 属性 ， 该 属性 可 以 为 块 级 元 素 设置 圆 角 边框 











效果 。 当 前 设置 成 50% 为 正 圆 形 效果 图 案 。 
运行 效果 如 图 6-2 所 示 。 
由 图 6-2 可 见 ， 目 前 CD 封面 的 圆 形 图 案 效 果 已 初步 完成 。 接 下 来 将 介绍 如 何 制作 音 
量 调节 进度 条 。 
3 
可 

















. 使 用 <input> 标 签 制作 音量 调节 进度 条 

[以 使 用 HTMLS5 表单 <input> 标 签 的 新 增 类 型 range 制作 音量 调节 进度 条 。 

相关 HIMLS 代码 片段 如 下 : 
本 是 调 季 还 度 条 -> 









该 进度 条 规定 了 音量 最 小 值 为 0 (min=-"0")、 音 量 最 大 值 为 1 (max="1")， 并 且 刻 度 
间隔 为 0.1 (step="0.1")。 
运行 效果 如 图 6-3 所 示 。 


回 - ” 配 副 回 - -Ea 
中 简单 音乐 播放 器 4 口 莘 单 音乐 播 疏 器 x 
CQ 简单 音乐 播放 申 的 设 i 轩 三 CQ 简单 音乐 播放 申 的 设 i 辕 三 
简单 音乐 播放 器 简单 音乐 播放 器 

















图 6-2 音乐 播放 器 的 CD 封面 设计 效果 图 6-3 音乐 播放 器 的 CD 封面 设计 效果 


由 图 6-3 可 见 ， 当 前 音量 滑动 条 效果 已 经 实现 ， 用 户 可 以 拖 动 当前 的 刻度 。 但 是 目前 
仅 进行 了 界面 设计 ， 后 续 还 需要 为 其 添加 相关 JavaScript 代码 才 可 实现 真正 的 音量 调节 功 
能 。 接 下 来 将 介绍 如 何 显示 歌曲 名 称 。 

4. 使 用 <span> 标 签 定义 歌曲 名 称 

可 以 使 用 <span> 标 签 显 示 歌 曲名 称 ， 方 便 后 期 切换 上 一 首 或 下 一 首 歌曲 时 动态 变化 歌 
曲名 称 的 显示 。 相 关 HTMLS5 代码 片段 如 下 : 



































<!-- 显 示 歌 曲名 称 --> 
<div> 

当前 正在 播放 : <span id="title"> 小 夜曲 </span> 
</div> 
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为 方便 切换 歌曲 时 能 动态 地 同步 更 新 歌曲 名 称 ， 需 要 在 JavaScript 里 面 调用 该 <span> 
标签 , 因此 为 该 <span> 标 签 设置 了 id 名 称 为 title, 同样 该 id 名 称 也 可 以 自 定义 为 其 他 内 容 。 

运行 效果 如 图 6-4 所 示 。 
由 图 6-4 可 见 ， 歌 曲名 称 显示 的 状态 栏 已 完成 ， 后 续 还 需要 为 其 添加 相关 JavaScript 
代码 才 可 实现 名 称 随 着 歌曲 的 切换 而 变化 的 效果 。 接 下 来 将 介绍 如 何 显示 音乐 播放 器 的 
按钮 。 

5. 使 用 <button> 标 签 制作 音乐 播放 器 按钮 

使 用 <button> 标 签 创建 自 定义 的 按钮 代替 <audio> 标 签 自 带 的 音乐 播放 器 控件 ， 并 在 
<button> 首 尾 标签 之 间 使 用 <img> 标 签 插入 透明 背景 的 png 图片 表 示 按 钮 图 标 , 将 图 标 大 小 
统一 规定 成 宽度 和 高 度 均 为 50 像素 。 本 例 中 节选 HIMLS 代码 片段 如 下 : 

















<! 一 -音乐 播放 器 按钮 --> 

<div> 
<button><img src="image/previous.png" width="50" height="50"/> 
</button> 


<button><img src="image/play.png" width="50" height="50"/> 
</button> 
<button><img src="image/next.png" width="50" height="50"/> 
</button> 

</div> 


为 了 使 <zbutton> 标 签 只 显示 自 定义 的 图 标 ， 需 要 在 CSS 文件 中 为 <button> 标 签 设置 统 
一 样式 : 背景 为 透明 并 且 无 边框 。 相 关 CSS 代码 片段 如 下 : 
buttont{ 
background: transparent; 


border: 0; 
outline: 0; 








此 时 界面 设计 部 分 全 部 完成 了 ， 运 行 后 在 浏览 器 中 显示 的 效果 如 图 6-5 所 示 。 
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Ke Pp pr 








| 当前 正在 播放 : 小 夜曲 


图 6-4 当前 歌曲 名 称 的 显示 效果 图 6-5 音乐 播放 器 完整 界面 布局 效果 图 


由 图 6-5 可 见 ， 使 用 <button> 标 签 实现 了 自 定义 形状 和 内 容 的 按钮 风格 。 至 此 音乐 播 
放 器 的 界面 设计 已 全 部 完成 。 下 一 节 将 介绍 如 何 载 入 音频 文件 ， 并 实现 播放 效果 。 


6.1.2 媒体 文件 的 载 入 


音乐 文件 的 载 入 使 用 HIMLS 音频 的 <audio> 标 签 ， 因为 需要 使 用 自 定义 的 播放 器 按钮 
控件 ， 所 以 不 要 添加 controls 属性 ， 以 禁用 浏览 器 自 带 的 音乐 播放 器 。 相 关 HTMLS5 代码 
片段 如 下 : 

<! 一 -音乐 文件 的 载 入 --> 

<audio id="audio" src="music/Serenade.mp3" preload> 

对 不 起 ， 您 的 浏览 器 不 支持 HTML5 音 频 播放 。 

</audio> 

在 <audio> 标 签 的 src 属性 中 规定 了 默认 初始 载 入 的 媒体 文件 路 径 一 一 本 地 music 文件 
夹 中 的 Serenade.mp3 文件 。 为 方便 后 续 的 JavaScript 调用 , 为 <audio> 标 签 定义 了 id 名 称 为 
audio， 该 id 名 称 可 自 定 义 。 在 <audio> 首 尾 标签 之 间 加 入 了 提示 语句 ， 当 浏览 器 版 本 过 低 
不 支持 HTML5 音频 时 会 显示 该 内 容 。 


6.1.3 控件 功能 的 实现 


本 节 主 要 介绍 如 何 使 用 JavaScript 代码 实现 音量 调节 、 歌 曲 的 播放 /和 暂停、 曲目 切换 以 
音乐 名 称 同 步 显 示 效果 。 
1. 音量 调节 控制 功能 的 实现 
当 用 户 拖 动 该 进度 条 的 刻度 时 音量 发 生 了 变化 , 因此 在 音量 控制 进度 条 的 <input> 标 签 
上 声明 了 onchange="setVolume(0" 表 示 当 刻度 发 生变 化 时 调用 JavaScript 函数 setVolume() 来 
重 置 音量 大 小 ， 函 数 名 称 可 自 定义 。 
相关 HTMLS5 代码 片段 添加 onchange 声明 后 如 下 : 


<! 一 -音量 调节 进度 条 -> 
<div> 















































<input id="volume" type="range" min="0" max="]1" step="0.1" onchange= 
"setVolume()" /> 
</div> 


为 方便 后续 的 JavaScript 调用 ， 为 当前 的 进度 条 定义 了 id 名 称 为 volume， 该 名 称 可 以 














自 定义 为 其 他 内 容 。 

在 JavaScript 中 使 用 document.getElementById("ID 名 称 ") 的 方法 分 别 获取 音频 对 象 和 音 
量 进度 条 。 本 例 中 节选 HTMLS5 代码 片段 如 下 : 

// 获 取 音 频 对 象 


Var music = document .getElementById ("music"); 




















// 获 取 音 量 调节 进度 条 

Var volume = document .getElementBylId ("volume "™); 

在 JavaScript 中 setVolume() 方 法 的 完整 代码 如 下 : 第 
rinse0 1|， 


HTML5 娱 伯 API 项 明 





HTML5 尿 页 户 纲 族 矿 实战 


music.volume = volume.value; 
} 


当 用 户 移 动 音量 进度 条 时 音量 值 对 应 的 刻度 发 生 了 变化 ， 该 行为 会 触发 进度 条 的 
onchange 事件 , 从 而 调用 JavaScript 中 的 setVolume() 方 法 ,此 时 music 对 象 的 音量 值 volume 
将 重 置 为 进度 条 上 的 刻度 值 ， 因 此 实现 了 实时 更 新 音量 调节 的 效果 。 

2.“ 播 放 / 暂 停 ” 按 钮 的 功能 实现 

对 于 “播放 /暂停 ”按钮 ， 为 该 按钮 提供 单 击 事件 onclick="toggleMusic0"， 其 中 
toggleMusic() 方 法 的 名 称 可 自 定义 ， 该 函数 需要 在 JavaScript 中 声明 。 

“播放 /暂停 ”按钮 添加 单 击 事件 后 的 相关 HTMLS5 代码 片段 如 下 : 


<button id="toggleBtn" onclick="toggleMusic()"><img src="image/play.png" 
width="50" height="50"/></button> 






































为 方便 在 JavaScript 中 调用 ， 为 “播放 /暂停 ”按钮 赋予 了 id 名称 toggleBtn， 该 id 名 
称 可 自 定义 。 

在 JavaScript 中 使 用 document.getElementById("ID 名 称 ") 的 方法 获取 “播放 /暂停 ” 按 
钮 。 相 关 JavaScript 代码 片段 如 下 : 


// 获 取 音 乐 的 “播放 /暂停 ”按钮 





Var toggleBtn = document .getElementById ("toggleBtn"); 


在 JavaScript 中 声明 toggleMusic() 方 法 ， 可 以 使 用 ifelse 语句 判断 当前 音乐 的 播放 状 
态 ， 如 果 是 暂停 状态 则 继续 播放 ， 并 同时 更 改 按钮 对 应 的 图 标 为 pause.png; 反之 ， 如 果 在 
播放 中 则 暂停 音乐 ， 并 更 改 按 钮 对 应 的 图 标 为 playpng。 相 关 JavaScript 代码 片段 如 下 : 


// 音 乐 播放 与 暂停 切换 方法 
function toggleMusic() { 
if(music.paused) { 
music.play(); 
// 播 放 音乐 
toggleBtn.innerHTML="'<img src="jmage/pause.png"wjidth="50"hejight="50"/>"7 
} else { 
music.pause() 7 
// 暂 停 音乐 
toggleBtn.innerHTMI="'<imgsrc="image/play.png" width="50"height="50"/>"7 











在 按钮 状态 切换 时 分 别 使 用 了 play0 和 pause0 方 法 播放 与 暂停 音频 文件 ， 同 时 通过 重 
置 innerHTML 属性 值 的 方式 更 改 按钮 的 显示 图 标 内 容 。 

运行 效果 如 图 6-6 所 示 。 

由 图 6-6 可 见 ， 当 前 “播放 /暂停 ”按钮 的 单 击 效果 已 经 实现 。 其 中 图 6-6(a) 显 示 的 是 
单 击 了 播放 按钮 后 的 效果 ， 此 时 歌曲 正在 进行 播放 ,并且 “播放 /暂停 ”按钮 的 图 标 样式 切 
换 为 暂停 按钮 。 图 6-6(b) 显 示 的 是 歌曲 暂停 播放 的 效果 ， 此 时 歌曲 为 暂停 播放 状态 ， 并 且 








“播放 /暂停 ”按钮 的 图 标 样式 切换 为 播放 按钮 。 
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(a) 歌曲 正在 播放 的 效果 (Cb) 歌曲 暂停 播放 的 效果 


图 6-6 “播放 /暂停 ”按钮 的 运行 效果 


3.“ 上 一 首 ” 和 “下 一 首 ” 按 钮 的 功能 实现 

为 “上 一 首 ” 按 钮 提供 单 击 事件 onclick="lastMusic0"; 为 “下 一 首 ” 按 钮 提供 单 击 事 
件 onclick="nextMusic0"。 当 用 户 单 击 对 应 按钮 时 会 调用 对 应 的 JavaScript 函数 ， 函 数 名 称 
同样 可 以 自 定义 。 这 些 函 数 需 要 在 JavaScript 中 写 出 才 可 实现 相关 效果 。 

相关 HIMLS 代码 片段 添加 单 击 事件 后 如 下 : 





<button onclick="lastMusic()"><img src="image/previous.png" width="50" 
height="50"/> 

</button> 

<button onclick="nextMusic()"><img src="image/next.png" width="50" 
height="50"/> 

</button> 





与 “播放 /暂停 ”按钮 不 同 ,“ 上 一 首 ” 和 “下 一 首 ” 按 钮 的 单 击 事件 不 涉及 按钮 图 标 
的 变化 ， 因 此 JavaScript 不 需要 获取 按钮 对 象 ， 可 直接 为 其 添加 onclick 事件 ， 无 须 另外 声 
明 id 名 称 。 

无 论 单 击 “ 上 一 首 ” 或 “下 一 首 ” 按 钮 ， 都 涉及 两 部 分 内 容 的 更 改 : 一 是 需要 播放 的 
音频 文件 的 切换 ， 二 是 在 网 页 上 显示 的 歌曲 名 称 的 切换 。 音 频 文件 的 切换 需要 先 暂停 当前 
正在 播放 的 音乐 ， 然 后 更 改 <audio> 标 签 的 src 属性 ， 使 其 指向 新 的 音频 文件 路 径 ， 再 重新 
播放 音乐 即 可 。 歌 曲名 称 的 切换 需要 与 音频 文件 的 切换 对 应 完成 ， 当 音频 切换 完成 时 重 置 | 6 
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HTML5 网页 玉带 克 计 完 此 














于 显示 音乐 名 称 的 <span> 首 尾 标签 中 的 内 容 即 可 。 

因此 ， 单 击 “ 上 一 首 ” 或 “下 一 首 ” 按 钮 进行 歌曲 切换 时 需要 先 获 取 切 换 的 新 歌曲 名 
称 以 及 媒体 文件 路 径 才能 进行 后 续 的 处 理 。 解决 方案 是 可 以 事先 在 JavaScript 中 使 用 Array 
数组 分 别 声明 媒体 文件 来 源 与 音乐 名 称 ， 并 使 用 变量 i 记录 当前 是 第 几 首 曲 目 。 

以 共计 3 首 曲目 为 例 ， 相 关 JavaScript 代码 如 下 : 

// 音 乐 路 径 列 表 


var list = new Array("music/Serenade.mp3", "music/EndlessHorizon.mp3", 
"music/ 月 光 下 的 云海 .mp3"); 

















// 音 乐 标题 列表 
var titleList = new Array ("小 夜曲 "，" 无 尽 的 地 平 线 "，" 月 光 下 的 云海 ") ; 





var i = 0;// 定 义 当前 是 第 几 首 曲 目 
单 击 “ 下 一 首 ” 按 钮 对 应 的 JavaScript 函数 方法 为 nextMusic()， 完 整 代码 如 下 : 
// 切 换 下 一 首 歌曲 


function nextMusic() { 

if (i == list.length - 1) 
i=0; 

slse 
i++;? 

music.pause(); 

music.src = list[i]; 

title.innerHTML = titleList[i]; 

music.play(); 











在 该 方法 中 需要 先 判断 当前 正在 播放 的 歌曲 是 否 已 经 是 播放 列表 中 的 最 后 一 首 歌曲 ， 
如 果 是 则 跳 转 到 第 一 首 歌曲 ， 和 否则 可 以 直接 跳 转 下 一 首 歌曲 。 因 此 需要 先 判断 用 于 记录 当 
前 歌曲 是 第 几 首 的 变量 i 值 ， 如 果 到 头 了 则 重新 定义 二 0， 否 则 直接 执行 i++ 令 i 增加 1 。 
因为 是 从 0 开始 计数 的 ， 所 以 最 后 一 首 歌曲 的 值 应 该 是 数组 长 度 减 1， 即 list.length-1。 

调整 完 变量 i 的 值 之 后 可 以 调用 HIMLS 媒体 对 象 中 的 pause0 方 法 暂停 当前 音乐 的 播 
放 ， 重 置 <audio> 标 签 中 的 src 属性 值 ， 换 成 新 歌曲 对 应 的 文件 路 径 ， 同 时 使 用 innerHTML 
更 新 <span> 标 签 内 部 的 歌曲 名 称 。 完 成 后 重新 执行 play0 方 法 播放 新 的 曲目 。 

单 击 “ 上 一 首 ” 按 钮 对 应 的 JavaScript 函数 方法 为 lastMusic0， 完 整 代 码 如 下 : 








// 切 换 上 一 首 歌曲 


function lastMusic() { 


if(i == 0) 
i=list.length - 1; 
else 
= 


music.pause () 7 

music.src = list[i]; 
title.innerHTML = titleList[i]; 
music.play(); 





} 


在 该 方法 中 需要 先 判断 当前 正在 播放 的 歌曲 是 否 已 经 是 播放 列表 中 的 第 一 首 歌曲 ， 如 





果 是 则 跳 转 到 最 后 一 首 歌曲 ， 否 则 可 以 直接 跳 转 上 一 首 歌 曲 。 因 此 需要 先 判断 用 于 记录 当 
前 歌曲 是 第 几 首 的 变量 i 值 ， 如 果 到 头 了 则 重新 定义 六 listlength-1， 和 否则 直接 执行 六 - 令 ; 
减少 1。 后 续 令 音乐 暂停 、 重 置 媒体 文件 来 源 、 更 改 曲目 名 称 和 重新 播放 音乐 的 相关 代码 
与 nextMusicO 中 的 对 应 部 分 完全 相同 ， 这 里 不 再 獒 述 。 


运行 效果 如 图 6-7 所 示 。 
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(a) 单 击 “ 上 一 首 ”按钮 的 播放 效果 (Cb) 单 击 “ 下 一 首 ” 按 钮 的 播放 效果 
图 6-7 歌曲 切换 按钮 的 运行 效果 
由 图 6-7 可 见 ， 当 前 歌曲 切换 按钮 的 单 击 效果 已 经 实现 。 其 中 图 6-7(a) 显 示 的 是 单 击 
了 “上 一 首 ” 按 钮 后 的 效果 , 此 时 歌曲 切换 到 列表 中 的 前 一 首 曲目 并 继续 进行 播放 。 图 6-7(b) 
显示 的 是 单 击 了 “下 一 首 ”按钮 后 的 效果 ， 此 时 歌曲 切换 到 列表 中 的 后 一 首 曲目 并 继续 进 
行 播放 。 至 此 音乐 播放 器 的 页 面 功 能 已 全 部 实现 。 


6.1.4 完整 代码 展示 














HTML5 完整 代码 如 下 : 

EE <!DOCTYPE html> 

之 <html> 

3 <head> 

4. <meta charset="utf-8"> 

和 <title> 简 单 音 乐 播放 器 </title> 

6 <link rel="stylesheet" href="css/music.css"> 

7 </head> 

8 . <body> 

Ss <h3> 简 单 音乐 播放 器 </h3> 

10. <hr /> 

ot 第 

js <! 一 音乐 文件 的 载 入 --> 6 
章 
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Ls 
14. 
Ls 
Le6s 
WR 
18s 
19s 
FA 
Rs 
2 
23s 
24. 


25s 
26. 
Ss 
28. 
29s 
30。 
31。 
32. 
33. 
34. 
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39。 
40 . 
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42. 
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Ts 
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49. 
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Ss 
52. 
53. 
54. 
55 


56. 
57。 
58 . 


59. 
60 . 
61. 
62。 
63。 


<audio id="audio" src="music/Serenade.mp3" preload> 
对 不 起 ， 您 的 浏览 器 不 支持 HTML5 音 频 播放 。 


</audio> 


<!-- 仿 CD 样式 圆 形 图 片 --> 
<div id="CDimage"> 

<img src="image/sky.jpg" /> 
</div> 


<!-- 音 量 调节 进度 条 --> 
<div> 
<input id="volume" type="range" min="0" max="1" step="0.1" 
onchange="setVolume()" /> 
</div> 


<!-- 显 示 歌 曲名 称 --> 
<div> 

当前 正在 播放 : <span id="title"> 小 夜曲 </span> 
</div> 


<!-- 音 乐 播放 器 按钮 --> 
<div> 
<button onclick="lastMusic()"><img src="image/previous. 
png" width="50" height="50"/> 
</button> 
<button id="toggleBtn"onclick="toggleMusic ()"><img src="image/ 
play.png" width="50" height="50"/> 
</button> 
<button onclick="nextMusic()"><img src="image/next .png" 
width="50" height="50"/> 
</button> 
</div> 
<script> 
// 获 取 音 频 对 象 


var music = document .getElementById ("audio"); 


// 获 取 音 量 调节 进度 条 
Var Volume = document .getElementBYyId("Volume ") 7 


// 获 取 音乐 “播放 /暂停 ”按钮 
Var toggleBtn = document .getElementByYId ("toggleBtn") 7 


// 获 取 当 前 播放 的 音乐 标题 
var title = document .getElementById ("title"); 


// 音 乐 路 径 列表 
var list = new Rrray("music/Serenade .mp3"，"music/ 
EndlessHorizon.mp3"，"music/ 月 光 下 的 云海 .mp3"); 


// 音 乐 标题 列表 
var titleList = new Array ("小 夜曲 "，" 无 尽 的 地 平 线 "，" 月 光 下 
的 云海 "); 


var i = 07 


// 定 义 当前 是 第 几 首 曲目 
// 音 乐 播放 与 暂停 切换 方法 








64. function toggleMusic() { 

65. if (music.paused) { 

66. music.play(); 

67. // 播 放 音 乐 

68 . toggleBtn.innerHTML = '<img src="image/pause.png" 
width="50" height="50"/>"'; 

69. } else { 

70. music.pause(); 

Es // 暂 停 音 乐 

24 toggleBtn.innerHTML = '<img src="image/play.png" 
width="50" height="50"/>"'; 

73。 } 

74. } 

Ts 

765 // 设 置 音量 大 小 

Fs function setVolume () { 

78 . music.volume = volume.value; 

人 } 

80. 

81. // 切 换 下 一 首 歌曲 

82. function nextMusic() { 

83. if (i == list.length - 1) 

84. i=0; 

85. else 

86. 六 

87. music.pause(); 

88. music.src = list[i]; 

89. title.innerHTML = titleList[i]; 

90. music.play(); 

9 } 

92 

93 . // 切 换 上 一 首 歌曲 

94. function lastMusic() { 

95s if (i == 0) 

96 . i = list.length - 1; 

97. else 

98. i==y 

99. music.pause (); 

100. music.src = list[i]; 

O01 title.innerHTML = titleList[i]; 

102. music.play(); 

03。 } 

104. </script> 

105. </body> 

106. </html> 











和 divt{ 

Fy text-align:center; 
3 margin:10px; 

4. = 

5. 

6. #CDimage img{ 

Ts border-radius:50%; 
8. . 

9 

10. imgt{ 

二 村 border: 0px; 
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} 


buttont{ 


background: transparent; 
border: 0; 
outline: 0; 





6.2 ”在 线 教学 视频 的 设计 与 实现 


【 例 6-2】 在 线 教学 视频 的 设计 与 实现 

背景 介绍 : 现 如 今 莫 课 (Massive Open Online Courses，MOOC) 的 概念 正在 兴起 ， 例 
如 哈佛 大 学 等 世界 级 名 校 陆续 设立 了 网 络 学 习 平台 ， 用 户 可 以 在 线 免费 观看 和 学 习 自 己 感 
兴趣 的 课程 。 在 我 国 ， 网 易 也 正式 推出 了 “全 球 名 校 视频 公开 课 项 目 ” 内 容 涵盖 了 科技 、 
艺术 、 金 融 、 人 文 多 个 领域 。 

功能 要 求 : 设计 一 款 基 于 HIMLS 视频 技术 的 在 线 视频 播放 页 面 ， 包 含 视频 播放 窗口 
和 课程 目录 列表 。 其 中 视频 播放 窗口 带 有 相关 控件 ， 可 以 由 用 户 单 击 切 换 全 屏 效 果 ， 以 及 
随时 暂停 和 拖 忠 到 指定 时 间 继 续 播 放 。 课 程 目录 列表 用 于 显示 当前 课程 的 大 纲 ， 用 户 单 击 
列表 中 的 不 同 选项 可 以 使 课程 跳 转 到 相应 的 播放 时 间 继 续 进行 播放 。 

最 终 效果 如 图 6-8 所 示 。 
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CE 0 一 图 











图 6-8 在 线 教学 视频 的 效果 图 


6.2.1 界面 设计 
本 节 主 要 介绍 在 线 教学 视频 播放 页 面 的 网 页 布局 和 样式 设计 , 包括 使 用 <div> 标 签 进行 





























整体 布局 、 使 用 <video> 标 签 制作 视频 播放 窗口 、 使 用 <ul> 和 <li> 标 签 制作 课程 目录 列表 ， 
配合 CSS 样式 完成 整个 页 面 设计 效果 。 
1.， 整体 布局 设计 
首先 直接 使 用 一 个 区 域 元 素 <div> 在 页 面 背景 上 创建 视频 播放 界面 , 在 其 内 部 预 留 视频 
播放 窗口 与 课程 大 纲 列表 的 空间 。 相 关 HIMLS 代码 片段 如 下 : 


<body> 
<div id="course"> 
<! 一 -创建 视频 播放 窗口 --> 
<!-- 课 程 大 纲 列表 --> 
</div> 
</body> 


该 段 代 码 中 为 <div> 元 素 定义 了 id="course", 以 便 可 以 使 用 CSS 的 ID 选择 器 进行 样式 
设置 。 

本 例 使 用 CSS 外 部 样式 表 规定 页 面 样式 。 在 本 地 css 文件 夹 中 创建 course.css 文件 ， 
并 在 <head> 首 尾 标签 中 声明 对 CSS 文件 的 引用 。 相 关 HIMLS 代码 片段 如 下 : 

















<head> 
<meta charset="utf-8"> 


<title> 在 线 课程 学 习 </title> 
<link rel="stylesheet" href="css/course.css"> 
</head> 


在 CSS 文件 中 为 id="course" 的 <div> 标 签 设置 样式 ， 具 体 样式 要 求 如 下 。 

。 尺寸 ; 宽度 为 640 像素 ; 

。 颜色 : 背景 颜色 为 白色 ; 

。 边 距 ， 各 边 的 外 边 距 定 义 为 aato， 以 便 可 以 居中 显示 ; 

。 文本 : 左 对 齐 显 示 ， 采 用 默认 字体 ; 

。 特殊 : 使 用 CSS3 技术 为 其 定义 边框 阴影 效果 ， 在 其 右 下 角 有 黑色 投影 。 
相关 CSS 代码 片段 如 下 : 

/* 设 置 视频 播放 界面 样式 */ 

#course { 


width: 640px; 
background-color: white; 





margin: auto; 
text-align: left; 
box-shadow: 10px 10px 1l5px black; 





其 中 box-shadow 属性 可 以 实现 边框 投影 效果 ，4 个 参数 分 别 代表 水 平方 向 的 偏 移 〈 向 
右 偏 移 10 像素 )、 重 直方 向 的 偏 移 〈 向 下 偏 移 10 像素 )、 阴 影 宽度 〈15 像素 ) 和 阴影 颜色 
(黑色 )， 均 可 自 定义 成 其 他 值 。 该 属性 是 CSS3 新 特性 中 的 一 种 ， 在 这 里 仅 为 美化 页 面 做 
简单 使 用 。 

网 页 背景 颜色 默认 为 白色 ， 与 <div> 元 素 设置 的 背景 颜色 相同 。 为 了 区 分 , 将 网 页 的 背 
景 颜色 重新 设置 为 银色 ， 并 设置 文本 为 居中 显示 效果 。 

相关 CSS 代码 片段 如 下 : 6 
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body { 
background-color: silver;/* 设 置 页 面 背 景 颜色 为 银色 */ 
text-align: center;/* 设 置 页 面 内 容 居 中 显示 */ 














由 于 目前 尚未 在 <div> 首 尾 标签 之 间 填 充 相 关内 容 ， 因 此 在 网 页 上 浏览 没有 完整 效果 ， 
只 能 看 到 背景 颜色 的 变化 。 接 下 来 将 介绍 如 何 进行 视频 播放 窗口 的 布局 设计 。 

2. 视频 播放 窗口 的 设计 

视频 播放 窗口 的 实现 使 用 HIML5 视频 中 的 <video> 标 签 。 由 于 需要 显示 播放 器 按钮 和 
进度 条 ， 所 以 在 <video> 首 标签 中 添加 controls 属性 以 启用 浏览 器 自 带 的 视频 播放 器 控件 。 
相关 HIMLS 代码 片段 如 下 : 

<!-- 创 建 视 频 播放 窗口 --> 


<video id="screen" width="640" controls> 

















对 不 起 ， 您 的 浏览 器 不 支持 HTML5 视 频 。 


</Video> 





代码 内 容 解 释 如 下 : 

(1) 为 方便 后 续 的 JavaScript 调用 ， 为 <video> 标 签 定义 了 id 名 称 为 screen, 该 id 名 称 
可 自 定义 。 

(2) 在 <video> 标 签 中 的 width 属性 规定 了 视频 播放 窗口 的 宽度 为 640 像素 ， 高 度 为 按 
照 比例 自 适应 。 

(3) <video> 标 签 中 的 controls 用 于 显示 浏览 器 默认 的 视频 播放 器 控件 。 

(4) 在 <video> 首 尾 标签 之 间 加 入 提示 语句 ， 当 浏览 器 版 本 过 低 不 支持 HTML5 视频 时 
会 显示 该 内 容 。 

运行 效果 如 图 6-9 所 示 。 


中 在 线 课程 学 习 
CQ 在 线 视频 学 习 的 设计 与 实现 .html 


图 6-9 视频 播放 窗口 效果 图 





图 6-9 可 见 ， 目 前 在 线 教学 视频 播放 页 面 已 初步 完成 。 由 于 尚未 指定 视频 来 源 ， 在 
视频 播放 窗口 中 只 能 显示 相关 播放 控件 与 空白 画面 。 接 下 来 将 介绍 如 何 进行 课程 列表 的 布 

















局 设计 。 

3. 课程 列表 布局 设计 

这 里 主要 介绍 如 何在 页 面 上 创建 完整 的 课程 列表 ， 包 括 列表 图 标 与 课程 目录 两 部 分 ， 
将 会 使 用 到 无 序列 表 标 签 <ul> 与 列表 选项 标签 <li>。 

首先 在 id="course" 的 <div> 元 素 内 部 预 留 区 域 添加 一 个 <ul> 元 素 ， 在 其 中 使 用 <] 记 显示 
课程 目录 内 容 。 在 每 一 项 <li> 标 签 中 使 用 <img> 标 签 显 示 播 放 图 标 ， 并 将 课程 目录 文本 嵌 套 
在 <span> 元 素 中 ， 以 便 后 续 可 以 使 用 CSS 设置 文本 样式 。 

相关 HTMLS5 代码 片段 如 下 : 


























<body> 
<div id="course"> 
<! 一 -创建 视频 播放 窗口 --> 
<!-- 课 程 大 纲 列表 --> 
<ul> 
<1i> 
<!-- 课 程 标题 --> 
<h3> 欧 洲 简 史 </h3> 
</1i> 
<! 一 -水 平 线 --> 
<hr /> 
< 
<img src="image/course/play.png" /> 
<span> 早 期 基督 美术 建筑 </span> 
</1i> 
<hr /> 
<1i> 
<img src="image/course/play.png" /> 


<span> 早 期 基督 美术 之 绘画 </span> 
/Ls 
<!-- 水 平 线 --> 


<hr /> 
<1i> 
<img src="image/course/play.png" /> 
<span> 早 期 基督 美术 之 绘画 : 拜占庭 美术 </span> 
</1i> 
<!-- 水 平 线 --> 
<hr /> 
«i> 
<img src="image/course/play.png" /> 
<span> 早 期 基督 美术 之 绘画 : 灸 嵌 画 </span> 
</ii> 
<! 一 水平线 --> 
<hr /> 
<1i> 第 





<img src="image/course/play.png" /> 6 
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<span> 早 期 基督 美术 之 绘画 : 罗马 式 美术 </span> 
Hi 
</ul> 
</div> 
</body> 








其 中 图 标的 素材 来 源 为 本 地 image/course 目录 中 的 play.png 文件 .每 两 个 <li> 元 素 之 间 
使 用 了 水 平 线 标签 <hr> 进 行 间隔 。 

在 CSS 文件 中 为 <ul> 标 签 进行 样式 设置 。 

。 列表 标记 : 去 掉 列表 选项 前 面 的 实心 圆 点 标记 符号 ; 

。 边 距 : 各 边 的 内 边 距 为 10 像素 ， 顶 端 外 边 距 为 -10 像素 。 

相关 CSS 代码 片段 如 下 : 





/* 设 置 列表 总 样式 */ 
ul 1{ 
list-style: none; 


padding: 10px; 
margin-top: -10px; 





在 CSS 文件 中 为 <img> 标 签 进行 样式 设置 。 
。 对 齐 方式 : 水 平方 向 为 底 端 对 齐 ; 
。 尺寸 :宽度 与 高 度 均 为 40 像素 。 
相关 CSS 代码 片段 如 下 : 
让 设置 图 标 样式 */ 
img { 
vertical-align: bottom; 


width: 40px; 
height: 40px; 





在 CSS 文件 中 为 列表 项 <li> 中 的 <span> 标 签 设置 样式 如 下 。 
。 尺寸 : 列表 项 高 度 与 行 高 均 为 40 像素 ; 
。 边 距 : 各 边 的 内 边 距 为 0 像素 。 
相关 CSS 代码 片段 如 下 : 
/* 设 置 课程 大 纲目 录 样 式 */ 
li span { 
line-height: 40px; 
height: 40px; 





padding: 0; 





要 


还 可 以 为 <li> 标 签 设置 鼠标 悬浮 时 的 样式 效果 ， 在 CSS 样式 表 中 用 lhover 表示 。 本 
例 将 该 效果 设置 为 字体 颜色 的 改变 ， 当 鼠标 悬浮 在 课程 目录 文本 上 时 将 文本 的 字体 颜色 从 








默认 的 黑色 换 成 红色 (red)。 
相关 CSS 代码 片段 如 下 : 
/* 设 置 鼠 标 悬 浮 于 列表 选项 时 的 样式 */ 


li:hover { 








color: red; 
} 


此 时 整个 样式 设计 就 全 部 完成 了 ， 其 界面 运行 效果 如 图 6-10 所 示 。 
- -Em 
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欧洲 简 史 
人 @) 早期 基督 美术 建筑 
人 @@) 早期 共生 美术 之 给 本 
人 @@) 早期 基督 美术 之 绘画 ， 拜 占 庭 美术 
(人 @) 早期 基督 美术 之 绘画 ， 镶嵌 本 
@@) 早期 基督 美术 之 绘画 ， 罗 马 式 美术 








图 6-10 在 线 教学 视频 的 界面 效果 图 
由 图 6-10 可 见 , 关于 在 线 教学 视频 的 布局 和 样式 要 求 已 初步 实现 。 目 前 尚未 实现 课程 
视频 的 载 入 与 播放 ， 该 内 容 将 在 下 一 节 介绍 。 
6.2.2 视频 文件 的 载 入 与 播放 


用 户 只 需要 对 <video> 标 签 进行 修改 即 可 实现 视频 文件 的 载 入 与 自动 播放 效果 。 在 
<video> 首 标签 中 添加 src 属性 以 指定 播放 的 课程 视频 来 源 ， 并 使 用 autoplay 属性 自动 播放 
已 经 加 载 完 毕 的 视频 文件 。 相 关 HIMLS 代码 片段 如 下 : 



































<! 一 -创建 视频 播放 窗口 --> 

<video id="screen" width="640" src="video/art.mp4" controls autoplay> 
对 不 起 ， 您 的 浏览 器 不 支持 HTML5 视 频 。 

</video> 6 








HTML5 鹿 傣 API 项 月 





HTML5 网 页 碘 带 克 夺 实时 





其 中 ，src 属性 中 规定 了 媒体 文件 来 源 为 本 地 video 文件 夹 中 的 artmp4 文件 ， 用 户 可 
以 根据 实际 需要 更 改 这 里 的 文件 路 径 和 视频 文件 的 名 称 。 
运行 效果 如 图 6-11 所 示 。 





由 图 6-11 可 见 ， 关 于 课程 视频 的 在 线 载 入 与 自动 播放 效果 已 初步 实现 。 目 前 尚未 单 击 


课程 目录 跳 转 指定 的 播放 时 间 ， 该 内 容 将 在 下 一 节 介绍 。 


襄 在 绪 课 程 学 习 x 
在 线 视 频 学 习 的 设计 与 实现 .html 三 
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欧洲 简 史 


(人 人) 早期 基督 美术 建筑 





人 @@) 早期 基督 美术 之 纤 画 
@@) 早期 基督 关 术 之 绘画 ， 拜占庭 美术 
他) 早期 基 世 美术 之 给 


早期 基督 美术 之 综 画 ， 罗 马 式 美术 








图 6-11 在 线 教学 视频 的 效果 图 


6.2.3 视频 时 间 跳 转 的 实现 


本 节 将 介绍 如 何 实现 视频 时 间 的 跳 转 功能 。 首 先 为 用 于 显示 课程 目录 的 列表 选项 标签 
<li> 提 供 单 击 事件 onclick="playCourse(time)"， 其 中 time 可 以 替换 成 需要 跳 转 的 具体 时 间 

















(单位 : 秒 )。 当 上 





户 单 击 对 应 的 课程 目录 选项 时 会 调用 该 函数 实现 视频 时 间 的 跳 转 ， 函 数 


名 称 同 样 可 以 自 定义 。 
相关 HIMLS 代码 片段 修改 后 如 下 : 





<!-- 课 程 大 纲 列表 --> 


<ul> 
光 I 
<! 一 -课程 标题 --> 
<h3> 欧 洲 简 史 </h3> 
</1i> 


<! 一 -水 平 线 --> 





<hr /> 

<1i onclick="playCourse(60)"> 
<img src="image/course/play.png" /> 
<span> 早 期 基督 美术 建筑 </span> 

/li 

<hr /> 

<1i onclick="playCourse(120)"> 
<img src="image/course/play.png" /> 
<span> 早 期 基督 美术 之 绘画 </ span> 

</1i> 

<!-- 水 平 线 --> 

<hr /> 

<1li onclick="playCourse (220) "> 
<img src="image/course/play.png" /> 
<span> 早 期 基督 美术 之 绘画 : 拜占庭 美术 </span> 

</1i> 

<!-- 水 平 线 --> 

<hr /> 

<1i1 onclick="playCourse (320) "> 
<img src="image/course/play.png" /> 
<span> 早 期 基督 美术 之 绘画 : 灸 嵌 画 </span> 

</1i> 

<!-- 水 平 线 --> 

<hr /> 

<1i onclick="playCourse (420) "> 
<img src="image/course/play.png" /> 
<span> 早 期 基督 美术 之 绘画 : 罗马 式 美术 </span> 

3 

</ul> 





其 中 ，playCourse0) 函 数 中 的 数字 表示 立刻 跳 转 到 当前 时 间 。 例 如 playCourse(100) 表 示 
跳 转 到 第 100 秒 的 位 置 继 续 播放 。 当 前 所 填写 的 时 间 值 仅 为 示例 ， 该 内 容 可 以 根据 实际 视 
频 课 程 的 内 容 进 行 修改 。 

在 JavaScript 中 使 用 document.getElementById("ID 名 称 ") 的 方法 获取 视频 对 象 。 

相关 JavaScript 代码 片段 如 下 : 





// 获 取 video 对 象 
Var screen = qdqocument.getElementBYId(" Screen") 7 











在 playCourseO 函 数 中 使 用 了 视频 对 象 的 currentTime 属性 重 置 播放 时 间 ， 然 后 使 用 
play() 方 法 从 指定 的 时 间 位 置 开 始 继续 播放 当前 视频 。 
相关 JavaScript 代码 片段 如 下 : 





// 跳 转播 放 时 间 

function playCourse (time) { 
// 重 置 当 前 播放 时 间 
screen.currentTime = time; 
// 继 续 播 放 视频 


screen.play (); 
’ 


切换 视频 的 播放 时 间 有 多 种 方法 ， 当 前 是 以 currentTime 属性 切换 视频 播放 的 时 间 为 
例 ， 还 可 以 重 置 视频 对 象 的 src 属性 ， 在 源 地 址 后 面 加 上 "#t=starttime" (其 中 starttime 替换 
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成 需要 跳 转 的 时 间 点 ) 能 达到 同样 的 效果 。 
运行 效果 如 图 6-12 所 示 。 
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(a) 单 击 课程 目录 跳 转 前 (b) 单 击 课程 目录 跳 转 后 
图 6-12 ”在线 教学 视频 的 效果 图 
其 中 ,图 6-12(a) 展 示 的 是 正常 播放 的 效果 ,当前 尚未 单 击 课程 目录 进行 跳 转 ;图 6-12(b) 


展示 的 是 单 击 了 最 后 一 个 课程 目录 选项 后 的 效果 ， 由 图 可 见 视频 课程 的 播放 时 间 立 刻 跳 转 
到 了 第 7 分钟。 至 此 在 线 教学 视频 的 播放 页 面 全 部 完成 。 


6.2.4 完整 代码 展示 


HTMLS5 完整 代码 如 下 : 

Es <!DOCTYPE html> 

区 5 <html> 

3 <head> 

4. <meta charset="utf-8"> 

六 <title> 在 线 课程 学 习 </title> 

6. <link rel="stylesheet" href="css/course.css"> 

了 </head> 

Ds <body> 

EE 内 <div id="course"> 

10. <!-- 创 建 视 频 播放 窗口 --> 

4s <video id="screen" width="640" src="video/art.mp4" controls 
autoplay> 

5 对 不 起 ， 您 的 浏览 器 不 支持 HTML5 视 频 。 

33。 </video> 

LW <!-- 课 程 大 纲 列表 --> 

EDs <ul> 

16. <1i> 

生生: <! 一 -课程 标题 --> 

18. <h3> 欧 洲 简 史 </h3> 

9 </1i> 

20. <!-- 水 平 线 --> 


Si XM 























本 <li onclick="playCourse (60)"> 

全 3 <img src="image/course/play.png" /> 

24. <span> 早 期 基督 美术 建筑 </span> 

258 </1i> 

26. <hr /> 

27: <li onclick="playCourse (120)"> 

28% <img src="image/course/play.png" /> 

2 和 5 <span> 早 期 基督 美术 之 绘画 </span> 

30s </1i> 

B31: <!-- 水 平 线 --> 

2 hy 1 

335 <li onclick="playCourse (220)"> 

34. <img src="image/course/play.png" /> 

35. <span> 早 期 基督 美术 之 绘画 : 拜占庭 美术 </span> 

号 </1i> 

33 <!-- 水 平 线 --> 

36-。 <hr /> 

39。 <1i onclick="playCourse (320)"> 

40. <img src="image/course/play.png" /> 

41. <span> 早 期 基督 美术 之 绘画 : 灸 典 画 </span> 

42. </1i> 

Ds <! 一 水平线--> 

44. <hr /> 

各所 <1Li onclick="playCourse (420) "> 

46 . <img src="image/course/play.png" /> 

47. <span> 早 期 基督 美术 之 绘画 : 罗马 式 美 术 </span> 

48 . </1i> 

49。 </ul> 

SO。 </div> 

Ss <script> 

52- // 获 取 video 对 象 

53- Var Screen = document .getElementById("screen"); 

54. 

55; // 跳 转播 放 时 间 

Ses function playCourse (time) { 

57; // 重 置 当前 播放 时 间 

58 . screen.currentTime = time; 

59. / /继续 播放 视频 

60. screen.play(); 

61. } 

62. </script> 

63. </body> 

64. </html> 

CSS 完整 代码 如 下 : 

a body { 

和 2 background-color: silver;/* 设 置 页 面 背景 颜色 为 银色 */ 

六 text-align: center;/* 设 置 页 面 内 容 居中 显示 */ 

4. Wl 

5. ”/* 设 置 视频 播放 界面 样式 */ 

6. #course { 

有 width: 640px; 

8 . background-color: white; 

Ds margin: auto; 第 

10. text-align: left; 

了 > box-shadow: 10pPx 10px 15px black; 6 
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/* 设 置 列表 总 样式 */ 
所 雍 -二 
list-style: none; 
padding: 10px; 
margin-top: -10pK7 
} 
/* 设 置 课程 标题 样式 */ 
h31 
text-align: center; 
/* 设 置 课程 大 纲目 录 样式 */ 
1i span { 
line-height: 40px; 
height: 40px; 
padding: 0; 


} 
/* 设 置 鼠标 悬浮 于 列表 选项 时 的 样式 */ 
li:hover { 

color: red; 


} 

/* 设 置 图 标 样式 */ 

img { 
vertical-align: bottom; 
width: 40px; 
height: 40px; 
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本 章 主要 包含 了 两 个 基于 HTMLS 地 理 定位 API 的 应 用 设计 实例 ， 一 是 基于 HTML5 
地 理 定位 API 的 运动 数据 记录 页 面 的 设计 与 实现 ， 二 是 基于 HTML5 地 理 定位 API 的 运动 
轨迹 绘制 页 面 的 设计 与 实现 。 在 运动 数据 记录 项 目 中 ， 主 要 难点 为 对 于 用 户 地 理 位 置 的 实 
时 监控 技术 以 及 半 正 矢 公式 计算 距离 的 应 用 ， 在 运动 轨迹 绘制 项 目 中 ， 主 要 难点 为 腾讯 地 
图 API 的 调用 、 计 时 功能 的 实现 以 及 轨迹 的 绘制 技术 。 

本 章 学 习 目 标 : 

。 学 习 如 何 综合 应 用 HTML5 地 理 定位 API、CSS 与 JavaScript 开 发 运动 数据 记录 项 目 ; 

。 学 习 如 何 综 合 应 用 HTML5 地 理 定位 API.CSS 与 JavaScript 开 发 运动 轨迹 绘制 项 目 。 


7.1 运动 数据 记录 页 面 的 设计 与 实现 
【 例 7-1】 简易 运动 数据 记录 页 面 的 设计 与 实现 
背景 介绍 :将 HIML5 地 理 定位 API 技术 用 于 移动 设备 ， 实 现 简易 运动 距离 的 记录 


功能 。 
功能 要 求 : 用 户 单 击 “ 开 始 记录 ”按钮 开始 记录 ， 实 时 监控 用 户 的 地 理 位 置 ， 并 计算 


运动 的 总 距离 ， 直 到 用 户 单 击 “ 完 成 记录 ”按钮 停止 监控 ， 效 果 如 图 7-1 所 示 。 


-= En 
划 跑步 记录 功能 的 设计 与 实 彤 ~ 启 ” 司 上 步 记录 牙 
文件 (F) 编辑 (E) 查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 


跑步 记录 功能 的 设计 与 实现 





您 的 当前 状态 






118.376109° 

31.336325° 

精确 度 :326 
lim 











(a) 单 击 “ 开 始 记录 ”按钮 后 的 效果 


-= En 


司 跑步 记录 功能 的 设计 与 实 愈 ~ 六 ”总 胸 步 记录 攻 
文件 {F) 编辑 (E) 查看 (V) 收 区 (A) 工具 (T) 帮助 (H) 


跑步 记录 功能 的 设计 与 实现 


您 的 当前 状态 





详细 信息 








(b) 单 击 “ 完 成 记录 ”按钮 后 的 效果 


图 7-1 运动 数据 记录 效果 图 
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7.1.1 界面 设计 


本 节 主 要 介绍 项 目的 页 面 设计 。 该 项 目的 主 界面 由 当前 状态 与 详细 信息 两 个 部 分 组 
成 ， 这 两 个 部 分 均 使 用 <h4> 和 <ul> 生 成 标题 与 列表 信息 。 相 关 HIMLS 代码 如 下 : 


























<body> 
<h3> 跑 步 记录 功能 的 设计 与 实现 </h3> 
hy > 
<div> 
<h4> 您 的 当前 状态 </h4> 
<ul> 
<1i> 开 始 时 间 : <span id="start time"></span></1i> 
<1i> 完 成 时 间 : <span id="end time"></span></1i> 
<1i> 总 距离 : <span id="distance">0</span>km</1i> 
</ul> 
<h4> 详 细 信 息 </h4> 
<ul> 
<1i> 经 度 : <span id="long"></span>” </1i> 
<1i> 纬 度 : <span id="lat"></span>" </l1i> 
<1i> 位 置 精确 度 : <span id="acc"></span></1i> 
<1i> 海 拔高 度 : <span id="alt">0</span>m</1i> 
<1i> 速 度 : <span id="speed">0</span>m/s</1i> 
</ul> 
<div class="center"> 
<button id="btn"> 开 始 记录 </button> 
</div> 
</div> 
</body> 





由 于 每 个 列表 项 都 将 随 着 地 理 定位 实时 更 新 数据 ， 因 此 为 各 列表 项 内 部 的 数据 部 分 添 
加 <span> 容 器 ， 并 给 出 自 定义 的 id 名 称 ， 这 样 后 续 可 以 使 用 JavaScript 代码 获取 <span> 对 
象 以 更 新 数据 值 。 

本 项 目 使 用 了 CSS 内 部 样式 表 来 辅助 泻 染 页 面 样式 ， 相 关 CSS 代码 片段 如 下 : 





<head> 
<meta charset="utf-8"> 
<title> 跑 步 记录 功能 的 设计 与 实现 </title> 
<style> 
div { 
text-align: left; 
margin: auto; 
padding: 10px; 
} 
-Center { 


text-align: center 
} 
</style> 
</head> 


运行 效果 如 图 7-2 所 示 。 





目前 尚未 使 用 HIMLS 地 理 定位 技术 ， 因 此 暂 无 实际 数据 显示 。 下 一 节 将 介绍 如 何 实 




















时 监控 用 户 所 在 设备 的 地 理 定位 坐标 。 ee 
7.1.2 实时 监控 地 理 定位 i 
i 跑步 记录 功能 的 设计 与 实现 
本 节 将 介绍 如 何 基 于 HTMLS5 地 理 定位 API 实时 获取 用 


户 的 地 理 位 置 的 经 纬度 坐标 。 您 的 当前 状态 

首先 在 JavaScript 中 声明 两 组 变量 , 分 别 用 于 记录 上 一 次 
以 及 当前 获取 的 用 户 位置 的 经 纬度 坐标 。 相关 JavaScript 代码 
如 下 : 


// 前 一 次 获取 的 经 度 
Var oldLong; 
// 前 一 次 获取 的 纬度 
Var oldLat; 

// 最 新 获取 的 经 度 
Var currentLong; 
// 最 新 获取 的 纬度 


Var currentLat; 













































图 7-2 运动 数据 记录 页 面 设计 





在 JavaScript 中 添加 getLocation() 方 法 用 于 实时 获取 定位 信息 。 相 关 JavaScript 代码 如 下 : 
// 获 取 地 理 位 置 


function getLocation() { 
if (navigator.geolocation) { 
var watchID = navigator.geolocation.watchPosition (showPosition, 
showError, options); 
} else { 
alert ("对 不 起 ， 您 的 浏览 器 不 支持 HTML5 地 理 定位 API"); 
} 


上 述 代 码 使 用 了 HTML5 地 理 定位 API 中 的 watchPosition() 方 法 实时 监控 用 户 位 置 。 
该 方法 中 的 3 个 参数 名 称 可 以 自 定 义 ， 分 别 表示 获取 位 置信 息 、 获 取 错 误 代 码 以 及 定位 参 
数 设置 。 

showPosition() 函 数 的 相关 JavaScript 代码 如 下 : 





// 回 调 函 数 ， 用 于 接收 获取 的 经 纬度 以 及 描述 信息 
function showPosition (position) { 
// 更 新 经 纬度 数据 
if (currentLong != null && currentLat != null) { 
oldLong = currentLong; 
oldLat = currentLat; 


} 
currentLong = position.coords.longitude; 
currentLat = position.coords.latitude; 


// 更 新 经 度 
Var long = document .getElementById ("long"); 
long.innerHTML = currentLong; 


// 更 新 纬度 








Var lat = document .getElementById ("lat"); 
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lat.innerHTML = currentLat; 

// 更 新 位 置 精确 度 

Var acc = document .getElementById ("acc"); 
acc.innerHTML = position.coords.accuracy; 

// 更 新 海拔 高 度 

Var alt = document getElementById ("alt") 7 
alt.innerHTML = position.coords.altitude; 
// 更 新 速度 

Var speed = document .getElementById ("speed"); 
speed = position.coords.speed; 








} 


上 述 代 码 表 示 一 旦 获取 到 了 最 新 的 经 纬度 和 其 他 定位 信息 直接 将 相关 数据 更 新 在 页 
面 上 ， 但 是 运动 距离 无 法 直接 获取 ， 需 要 后 续 通 过 一 些 公式 计算 来 获得 。 
showError(O) 函 数 的 相关 JavaScript 代码 如 下 : 
// 回 调 函 数 ， 用 于 接收 获取 失败 时 的 错误 代码 


function showErrOoFr (error) { 

Switch (error .code) { 

Case error.PERMISSION DENIED: 
alert ("用 户 拒 绝 了 地 理 定位 的 请 求 。") ; 
break; 

Case error.POSITION UNAVAILABLE: 
alert ("位 置信 息 不 可 用 。"); 
break; 

Case error.TIMEOUT: 
alert ("请 求 超 时 。"); 
break; 

Case error.UNKNOWN ERROR: 
alert ("未 知 错误 发 生 。"); 
break; 











这 里 使 用 switch 语句 分 别 判断 了 不 同 的 错误 代码 情况 ， 并 弹出 对 应 的 错误 提示 。 
options 参数 的 相关 JavaScript 代码 如 下 : 





// 定 位 参数 设置 

var options = { 
enableHighAccuracy : true, 
timeout : 2000, 
maximunAge : 2000 


上 述 代码 表示 开启 高 精确 度 定位 ， 等 待 超时 时 间 与 重新 获取 定位 数据 的 间隔 时 间 均 为 
2000 毫秒 ， 即 两 秒 。 
由 于 当前 还 没有 在 “开始 记录 ”按钮 的 单 击 事件 中 调用 getLocation() 函 数 ， 因 此 尚未 
真正 开启 定位 功能 。 下 一 节 将 介绍 如 何在 同一 个 按钮 上 实现 开始 与 结束 运动 的 功能 切换 。 


7.1.3 开始 与 结束 按钮 的 切换 


由 于 使 用 同一 个 按钮 表示 运动 的 开始 与 结束 ， 因 此 在 JavaScript 中 首先 声明 自 定义 变 
量 isRunning 用 于 标记 当前 的 运动 状态 。 相 关 JavaScript 代码 如 下 : 




















// 当 前 运动 状态 ，true 为 正在 运动 ，false 为 没有 运动 


var isRunning = false; 








由 于 在 单 击 按钮 时 也 需要 记录 当前 时 间 ， 因 此 事先 声明 变量 start_time 和 end_time 分 
别 用 于 表示 运行 开始 与 结束 时 间 的 <span> 对 象 。 相 关 JavaScript 代码 如 下 : 

// 显 示 运 动 开 始 时 间 的 <span> 对 象 

var start time = document.getElementById("start time"); 


// 显 示 运 动 结束 时 间 的 <span> 对 象 


Var end time = document .getElementById ("end time"); 


为 <button> 按 钮 添加 onclick 事件 ， 相 关 HTMLS5 代码 修改 后 如 下 : 


[ <button id="btn" onclick="toggleBtn()"> 开 始 记 录 </button> 


这 里 的 函数 名 称 toggleBtn0 可 以 根据 开发 者 的 实际 需要 自 定义 。 
在 JavaScript 中 添加 toggleBtn0 函 数 ， 相 关 代码 如 下 : 

















jl 

















function toggleBtn() { 
Var btn = document .getElementById ("btn"); 
// 开 始 运 动 
if (!isRunning) { 
// 获 取 当 前 时 间 对 象 
Var now = new Date(); 
// 更 新 开始 时 间 信 息 
start time.innerHTML = now.toLocalestring(); 
// 清 请 息 
end time.innerHTML = ""; 
// 更 新 运动 状态 为 true， 表 示 正 在 运动 
isRunning = true; 
// 更 新 按钮 上 的 文字 内 容 
btn.innerHTML = "完成 记录 "; 
// 运 动 总 距离 清 零 
document .getElementById("distance") .innerHTML = "0"7 
// 开 始 定位 
getLocation () 7 
} 
// 结 束 运动 
else { 
// 更 新 运动 状态 为 fal se， 表 示 结 束 运动 
isRunning = false; 
// 更 新 按钮 上 的 文字 内 容 
btn.innerHTML = "开始 记录 "; 
// 获 取 当 前 时 间 对 象 
Var now = new Date(); 
// 更 新 结束 时 间 信 息 


end time.innerHTML = now.toLocaleString () ;7 








运行 效果 如 图 7-3 所 示 。 
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详细 








(a) 页 面 初始 加 载 效果 (b) 开始 记录 页 面 效果 (c) 完成 记录 页 面 效果 


图 7-3 开始 与 结束 按钮 的 切换 效果 


其 中 ， 图 7-3(a) 显 示 的 是 页 面 初始 加 载 效 果 ， 此 时 尚未 开启 定位 功能 ， 因 此 无 数据 信 
息 ; 图 7-3(b) 为 单 击 “ 开 始 记录 ”按钮 时 的 效果 ， 页 面 会 显示 当前 的 开始 时 间 、 经 纬度 等 
定位 信息 ; 图 7-3(c) 为 单 击 “ 完 成 记录 ”按钮 时 的 效果 ， 页 面 会 追加 显示 当前 完成 时 间 、 

由 于 当前 使 用 的 是 计算 机 端 浏览 器 ， 因 此 无 海拔 数据 (会 显示 为 空 值 aull)， 如 果 使 用 
手机 端 浏览 器 将 显示 该 内 容 。 此 时 也 尚未 在 JavaScript 中 对 运动 距离 进行 计算 ， 因 此 该 数 
据 目前 均 显 示 为 0km。 下 一 节 将 介绍 如 何 利用 数学 公式 计算 运动 的 总 路 程 。 


7.1.4 计算 与 显示 距离 


事实 上 ， 地 球 上 任意 两 个 坐标 点 在 地 平 线 上 的 距离 并 不 是 直线 ， 而 是 球面 的 弧 线 。 本 
节 将 介绍 如 何 利用 半 正 矢 公式 计算 已 知 经 纬度 数据 的 两 个 坐标 点 之 间 的 距离 。 半 正 矢 公式 
也 称 为 Haversine 公式 ， 它 最 早 是 航海 学 中 的 重要 公式 ， 其 原理 是 将 地 球 看 作 圆 形 ， 利 用 
公式 来 计算 圆 形 表面 上 任意 两 个 点 之 间 的 弧 线 距离 。 

Haversine 公式 中 与 本 项 目 有 关 的 公式 为 : 


qd=2r | sin2 (号 于 ]+es(m )cos(9, )sin” 2] 


相关 符号 解释 如 下 。 
。d; 两 点 之 问 的 弧 线 总 距离 。 

。/: 球体 的 半径 。 

。 9、: 第 一 个 和 第 二 个 举 标 点 的 续 度 (需要 将 角度 转换 为 弧度 表示 )。 

。 加 石 : 第 一 个 和 第 二 个 坐标 点 的 经 度 (需要 将 角度 转换 为 弧度 表示 )。 

在 JavaScript 中 提供 了 自 定义 函数 toRadians0 用 于 将 角度 转换 为 弧度 ， 相 关 代码 如 下 
// 角 度 转换 为 弧度 


function toRadians (degree) { 
return degree * Math.PI / 180; 











CT 














然后 自 定义 名 称 为 getDistance0 的 函数 ， 参 数 为 两 个 坐标 点 的 经 纬度 数值 ， 然 后 使 
半 正 矢 公式 求 出 两 点 之 间 的 距离 。 相 关 JavaScript 代码 如 下 : 


// 计 算 两 个 坐标 点 之 间 的 距离 
function getDistance(latl, longl, lat2, long2) { 
// 地 球 的 半径 (单位 : 千 米 ) 
var R = 6371; 
// 角 度 转换 为 弧度 
Var deltaLat = toRadians (lat2 - latl); 
var deltaLong = toRadians (long2 - longl1); 
latl = toRadians (lat1); 
lat2 = toRadians (lat2); 
// 计 算 过 程 
var h = Math.sin(deltaLat / 2) * Math.sin(deltaLat / 2) + Math.cos (lat1) 


* Math.cos (lat2) * Math.sin(deltaLong / 2) * Math.sin(deltaLong / 2); 
// 求 距离 











var d = 2 * R* Math.asin(Math.sqrt(h)); 
return qd; 





需要 注意 的 是 ,地 球 是 近似 圆 形 ,其 半径 在 不 同 地 区 不 相同 : 两 极 半径 为 6356.75km， 
赤道 半径 为 6 378.14km。 为 方便 计算 ， 这 里 取 值 为 地 球 的 平均 半径 6 371km， 因 此 结果 具 
有 0.5% 左 右 的 误差 。 

本 项 目的 距离 计算 原理 是 求 每 两 个 连续 获得 的 坐标 点 之 间 的 距离 ， 并 汇总 累加 到 一 起 
以 获得 运动 的 总 距离 数值 。 在 showPosition() 方 法 中 调用 getDistanceO 函 数 来 计算 新 获取 的 
坐标 点 与 上 一 次 记录 的 坐标 点 之 间 的 距离 ， 并 更 新 总 距离 。 

相关 JavaScript 代码 修改 后 如 下 : 





// 回 调 函 数 ， 用 于 接收 获取 的 经 纬度 以 及 描述 信息 
function showPosition(position) { 

// 更 新 经 纬度 、 速 度 、 海 拔 等 数据 

… 《代码 略 ) 


// 更 新 运动 距离 

if (oldLat != null && oldLong != null) { 
// 计 算 本 次 运行 的 距离 
var m = getDistance (currentLat, currentLong, oldLat, oldLong); 
// 获 取 页 面 上 目前 的 总 距离 


Var lastDistance = document .getElementById("distance") .innerHTML; 
// 将 总 距离 加 上 本 次 运动 的 距离 ， 再 更 新 到 页 面 上 

document .getElementById("distance") .innerHTML = parseFloat (last 
Distance) + m; 


E 





运行 效果 如 图 7-4 所 示 。 
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(a) 页 面 初始 加 载 效 果 (b) 计算 运动 距离 的 过 程 (ce) 完成 记录 页 面 效 果 
图 7-4 计算 运动 总 距离 效果 
由 于 是 在 计算 机 端 运行 的 ， 因 此 效果 图 中 没有 海拔 高 度 值 。 如 果 需 要 在 手机 端 访 问 ， 
最 好 是 将 本 项 目 页 面部 署 在 服务 器 上 进行 访问 。 此 时 运动 数据 记录 项 目的 功能 已 经 全 痢 
完成 。 
7.1.5 完整 代码 展示 
完整 的 HTMLS5 代码 如 下 : 





. <!DOCTYPE html> 

2 <html> 

， <head> 

4. <meta charset="utf-8"> 

下 <title> 跑 步 记录 功能 的 设计 与 实现 </title> 
6 <style> 

7 div { 

8. text-align: left; 

9. margin: auto; 

10. padding: 10px; 

Ls } 

了 人 -Center { 

13s text-align: center 

14. } 

5 </style> 

16. </head> 

Ls <body> 

18. <h3> 跑 步 记录 功能 的 设计 与 实现 </h3> 

19: <hr /> 

20. <div> 

ZE <h4> 您 的 当前 状态 </h4> 

22。 <ul> 

23s <1i> 

24. 开始 时 间 : <span id="start time"></span> 
25. ei 

26. <1i> 

和 完成 时 间 : <span id="end time"></span> 





28 . </1i> 





3 
30. 
32 < 
33. 
34. 
35s 
36. 
37。 
38 . 
39: 
40. 
41. 
42. 
43. 
44. 
45 . 
46. 
47. 
48. 
49. 
Sa 
Sl, 
52. 
53.。 
54. 
55。 
56. 
S7， 
58.。 
59。 
60 . 
了 
62。 
63-。 
64. 
65 . 
66. 
67. 
68. 
69. 
了。 
生生 


72. 
73.。 
74. 
75。 
76。 
77。 
78。 
898。 
80 . 
81. 
82. 
83。 
84. 





<1i> 
总 距离 : <span id="distance">0</span>km 
</1i> 
</ul> 


<h4> 详 细 信 息 </h4> 
<ul> 
La 
经 度 : <span id="long"></span>* 
</1i> 
<1i> 
纬度 : <span id="lat"></span>" 
</1i> 
<1i> 
位 置 精确 度 : <span id="acc"></span> 
</1i> 
<1i> 
海拔 高 度 : <span id="alt">0</span>m 
</1i> 
<1i> 
速度 : <span id="speed">0</span>m/s 
</1i> 
</ul> 
<div class="center"> 
<button id="btn" onclick="toggleBtn()"> 
开始 记录 
</button> 
</div> 
</div> 
<script> 
// 前 一 次 获取 的 经 度 
Var oldLong; 
// 前 一 次 获取 的 纬度 
Var oldLat; 
// 最 新 获取 的 经 度 
Var currentLong; 
// 最 新 获取 的 纬度 


Var currentLat; 


// 获 取 地 理 位 置 
function getLocation() { 
if (navigator.geolocation) { 
var watchID = navigator.geolocation.watchPosition 
(showPosition, showError, options); 
} else { 
alert ("对 不 起 ， 您 的 浏览 器 不 支持 HTML5 地 理 定位 API"); 
} 
} 


// 回 调 函数 ， 用 于 接收 获取 的 经 纬度 以 及 描述 信息 
function showPosition(position) { 
// 更 新 经 纬度 数据 
if (currentLong != null && currentLat != null) { 
oldLong = currentLong; 
oldLat = currentLat; 
} 
currentLong = position.coords.longitude; 
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85. currentLat = position.coords.latitude; 

86. 

Ds alert (currentLong + "," + CurrentLat); 

88. 

89. // 更 新 经 度 

90 . Var long = document .getElementById("1ong") ; 

2 long.innerHTML = currentLong; 

92 . // 更 新 纬度 

四 Var lat = document .getElementById ("lat"); 

94. lat.innerHTML = currentLat; 

95. // 更 新 位 置 精确 度 

96; Var acc = document .getElementById ("acc" 

97s acc.innerHTML = position.coords.accuracy; 

98. // 更 新 海拔 高 度 

99。 var alt = document .getElementById("alt") 

100 . alt.innerHTML = position.coords.altitude; 

101 . // 更 新 速度 

102; var speed = document .getElementById ("speed"); 

L03。 speed = position.coords.speed; 

104. 

105 . // 更 新 运动 距离 

106. if (oldLat null && oldLong != null) { 

107. // 计 算 本 次 运行 的 距离 

108 . var d= getDistance (currentLat, currentLong, oldLat, 
oldLong); 

109. // 获 取 页 面 上 目前 的 总 距离 

EEO var lastDistance =document .getElementById ("distance"). 
innerHTML; 

Ls alert (d); 

112. // 将 总 距离 加 上 本 次 运动 的 距离 ， 再 更 新 到 页 面 上 

LD: document .getElementById ("distance") .innerHTML= 
parse Float (lastDistance) + d; 

114. } 

B19 } 

I316。 

Ls // 回 调 函 数 ， 用 于 接收 获取 失败 时 的 错误 代码 

118 . function showError (error) { 

9 switch(error.code) { 

120. Case error.PERMISSION DENIED: 

2 alert ("用 户 拒 绝 了 地 理 定位 的 请 求 。") ; 

122: break; 

123. Case error.POSITION UNAVAILABLE: 

124. alert ("位 置信 息 不 可 用 。"); 

L225 break; 

126. case error.TIMEOUT: 

127s alert (" 请 求 超时 。") ; 

128. break; 

29。 case error.UNKNOWN ERROR: 

DSO alert ("未 知 错误 发 生 。") ; 

131. break; 

132. } 

133. F 

134. 

Ds // 定 位 参数 设置 

2436。 Var options = { 

ELIT. enableHighAccuracy : true, 

L380 timeout : 2000, 





139. maximunAge : 2000 








140. 
al 
L425 


143 


144. 
145. 
146. 
147. 
148. 
149. 
150s 
L531s 
L152 
153. 
15。 
155. 
56% 
157。 
158. 
5: 
160. 
161. 
162. 
163. 
164. 
165. 
166. 
167. 
168. 
169; 
170. 
Ls 
EL 
173. 
174. 
175， 
176. 
775 
178: 
179, 
180. 
181; 
182: 
183- 
184. 
185. 
186. 
187. 
188. 
189. 
190. 
TD: 
192. 
193, 
194. 
E95, 


] 7 


// 当 前 运动 状态 ，true 为 正在 运动 ，false 为 没有 运动 

Var isRunning = false; 

// 显 示 运 动 开始 时 间 的 <span> 对 象 

Var start time = document.getElementById("start time") 7 
// 显 示 运 动 结束 时 间 的 <span> 对 象 


Var end time = document.getElementById ("end time") 


function toggleBtn() { 

Var btn = document .getElementById ("btn"); 

// 开 始 运动 

if (!isRunning) { 
// 获 取 当 前 时 间 对 象 
Var now = new Date () 7 
// 更 新 开始 时 间 信 息 
start time.innerHTML = now.toLocaleString() 7 
// 清 空 结束 时 间 信 息 
end time.innerHTML = 
// 更 新 运动 状态 为 true， 表 
isRunning = true; 
// 更 新 按钮 上 的 文字 内 容 
btn.innerHTML = "完成 记录 "; 
// 运 动 总 距离 清 零 
document .getElementById ("distance") .innerHTML = "0"; 
// 开 始 定位 


getLocation() 7 





示 正 在 运动 





} 

// 结 束 运动 

else { 
// 更 新 运动 状态 为 False， 表 示 结 束 运动 
isRunning = false; 
// 更 新 按钮 上 的 文字 内 容 
btn.innerHTML = "开始 记录 "; 


// 获 取 当 前 时 间 对 象 
Var now = new Date () 7 
// 更 新 结束 时 间 信 息 
end time.innerHTML = now.toLocalestring(); 
} 
} 
// 角 度 转换 为 弧度 


function toRadians (degree) { 
return degree * Math.PI / 180; 
} 


// 计 算 两 个 坐标 点 之 间 的 距离 
function getDistance(latl, longl, lat2, long2) { 
// 地 球 的 半径 (单位 : 千 米 ) 
var R = 6371; 
// 角 度 转换 为 弧度 
var deltaLat = toRadians (lat2 - latl); 
var deltaLong = toRadians (long2 - longl1); 
latl = toRadians (lat1); 
lat2 = toRadians (lat2); 


// 计 算 过 程 
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Var h = Math.sin(deltaLat / 2) * Math.sin(deltaLat /2) + 
Math .cos (lat1) *Math .cos (lat2) *Math.sin (deltaLong/2) *Math.sin (deltaLong/2); 

// 求 距离 

var d=2* R* Math.asin(Math.sqrt(h))7 

return qd; 


下 号 95 


L193 

198; 

E99S 

200 . } 
201. </script> 
202。 </body> 

203. </html> 








7.2 ”运动 轨迹 绘制 页 面 的 设计 与 实现 

【 例 7-2】 运动 轨迹 绘制 页 面 的 设计 与 实现 

背景 介绍 ， 随 着 人 们 对 健康 意识 的 提高 ， 各 类 运动 软件 也 逐渐 流行 。 由 于 手机 方便 擒 
带 ， 又 自 带 GPS 定位 功能 ， 因 此 APP 成 为 用 户 的 首选 ， 例 如 咕 蜂 、 益 动 等 。 这 些 软件 都 
具有 类 似 的 一 个 功能 模块 ， 就 是 在 电子 地 图 上 跟踪 记录 用 户 跑步 或 骑 行 的 运动 轨迹 。 

功能 要 求 : 仿照 运动 APP 的 轨迹 记录 功能 将 HIML5 地 理 定位 技术 用 于 移动 设备 ， 实 
现 地 图 显示 与 运动 轨迹 追踪 绘制 效果 。 用 户 运动 前 单 击 “ 开 始 跑步 ”按钮 进行 记录 ， 页 面 
将 实时 监控 用 户 的 地 理 位 置 ， 并 逐步 绘制 在 地 图 画面 上 。 用 户 完成 运动 时 单 击 “ 结 束 跑步 ” 
按钮 停止 绘制 。 

运行 效果 如 图 7-5 所 示 。 
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(a) 页 面 初始 加 载 效果 


7.2.1 界面 设计 


。 4 
3 入 
i om 


总 时 长 : 00:00:03 


(b) 开始 运动 效果 


图 7-5 


本 项 目的 界面 设计 较为 简单 ， 分 为 下 面 两 个 部 分 。 
。 地 图 区 域 : 用 于 显示 电子 地 图 和 运动 轨迹 ， 是 整个 页 面 的 总 体 部 分 ; 
。 控制 区 域 ， 用 于 显示 开始 与 结束 按钮 和 计时 信息 ， 内 柑 于 地 图 区 域 中 。 








绘制 运动 轨迹 的 最 终 效果 图 
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(c) 完成 记录 页 面 效果 


相关 HIMLS 代码 如 下 : 





<body> 
<div id="container"> 
<div id="bar" 
<button id="btn"> 
开始 跑步 
</button> 
<div id="info"> 





总 时 长 : <span id="time">00:00:00</span> 
</div> 
</div> 
</div> 
</body> 








其 中 id="container" 的 <div> 元 素 用 于 显示 电子 地 图 ， 里 面包 含 了 id="bar" 的 <div> 元 素 





用 于 显示 开始 与 结束 按钮 和 计时 信息 。 由 于 总 时 长 需要 不 断 变 化 更 新 ， 因 
在 了 id="time" 的 <span> 容 器 中 ， 以 便 后 续 可 以 在 JavaScript 中 调用 更 新 。 
在 页 面 中 使 用 了 CSS 内 部 样式 表 规 定 显示 效果 ， 相 关 CSS 代码 如 下 : 
<style> 
html, body { 

height: 100%; 

margin: Opx; 

padding: Opx 








} 

#container { 
width: 100%; 
height: 100% 

} 

#bar { 
position: relative; 
z-index: 99; 
left: 0%; 
top: 75%; 
text-align: center; 
vertical-align: middle; 
height: 25%; 
font-size: 1.2em; 
background-color: white; 


} 

#btn { 
position: relative; 
background-color: #00FD00; 
border: none; 
outline: none; 
width: 30%; 
margin-top: 25px; 
padding: 10px; 

} 

#info { 


margin: 10px; 
padding: 10px; 
} 
</style> 





当前 的 显示 效果 如 图 7-6 所 示 。 


此 将 时 间 信 息 放 
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此 时 由 于 尚未 载 入 地 图 ， 因 此 只 能 看 到 按钮 与 总 时 长 信息 显示 在 页 面 的 最 下 方 。 
7.2.2 ”开始 与 结束 按钮 的 切换 EL | 


由 于 使 用 同一 个 按钮 表示 运动 的 开始 与 结束 ， 因 此 在 
JavaScript 中 首先 声明 自 定义 变量 status 用 于 标记 当前 的 运动 状 
态 。 相 关 JavaScript 代码 如 下 : 

















// 标 记 当 前 的 运动 状态 ， 初 始 值 表示 尚未 开始 运动 


Var status = "stop"; 





为 按钮 添加 onclick 事件 ， 相 关 HIML5 代码 修改 后 如 下 : 
<button id="btn" onclick="toggle()"> 
开始 跑步 [| 


</button> 总 时 长 ; 00:00:00 








在 JavaScript 中 添加 自 定义 函数 toggle0 用 于 判断 本 次 按钮 图 7-6 页 面 设计 效果 图 
的 单 击 对 应 行为 并 执行 ， 相 关 代 码 如 下 : 


function toggle() { 

// 当 前 为 非 运 动 状 态 

if (status == "stop") { 
// 更 新 状态 为 开始 运动 
status = "satart"s 
// 更 新 按钮 显示 的 文字 内 容 
btn.innerHTML = "结束 跑步 "; 
// 开 始 实时 更 新 地 理 位 置 
start (); 

} else if (status == "start") { 
// 更 新 状态 为 停止 运动 
status = "stop"; 


// 更 新 按钮 显示 的 文字 内 容 


btn.innerHTML = "开始 跑步 "; 
// 停 止 地 理 位 置 的 实时 更 新 
stop () 


} 





上 述 代 码 中 的 start0 与 stop0 均 为 自 定义 名 称 的 JavaScript 函数 ， 分 别 用 于 启动 和 停止 
运动 轨迹 的 绘制 与 计时 功能 。 这 两 个 函数 的 内 容 将 在 后 面 几 节 逐步 完善 ， 下 一 节 将 介绍 如 
何 绘制 地 图 与 运动 轨迹 。 


7.2.3 绘制 地 图 与 运动 轨迹 


本 节 主 要 介绍 运动 轨迹 追踪 的 相关 功能 ， 包 括 以 下 内 容 : 

。 在 页 面 上 显示 以 当前 坐标 为 中 心 的 地 图 ; 

。 在 地 图 上 绘制 运动 轨迹 。 

1. 实时 监控 用 户 地 理 位 置 

可 以 使 用 HTML5 地 理 定位 API 中 的 watchPosition0 方 法 来 实时 监控 用 户 的 地 理 位 置 。 
首先 在 JavaScript 中 声明 变量 watchID 用 于 记录 当前 实时 监听 的 IJD， 相 关 代码 如 下 : 











// 实 时 监听 用 户 地 理 位 置 变化 的 ID 
Var WatchID7 


在 JavaScript 中 添加 startO 函 数 ， 用 于 开启 对 于 地 理 位置 的 实时 监听 。 相 关 代 码 如 下 : 
// 开 始 实时 更 新 地 理 位 置 


function start() { 
// 获 取 用 户 当前 的 定位 信息 


navigator.geolocation.getCurrentPosition (showPosition); 





























// 开 始 实时 更 新 地 理 位 置信 息 
watchID = navigator.geolocation.watchPosition (showPosition, showError, 
options); 





} 


上 述 代 码 将 在 按钮 显示 为 “开始 运动 ”按钮 时 单 击 被 调用 。 
其 中 watchPosition() 方 法 的 3 个 参数 showPosition、showError 和 options 的 内 容 如 下 : 








function showPosition(position) { 
// 获 取 当 前 经 纬度 
var lat = position.coords.latitude; 
var long = position.coords.1longitude; 


} 


function showError (error) { 

Switch (error.code) { 

Case error.PERMISSION DENIED: 
alert ("用 户 拒绝 了 地 理 定位 的 请 求 。") ; 
break; 

Case error.POSITION UNAVAILABLE: 
alert ("位 置信 息 不 可 用 。"); 
break; 

case error.TIMEOUT: 
alert ("请 求 超时 。"); 
break; 

Case error.UNKNOWN ERROR: 
alert ("未 知 错误 发 生 。") ; 
break; 


} 


Var options = { 
enableHighAccuracy : true, 
maximumAge : 2000, 
timeout : 2000 

}; 


这 里 在 showPosition0 函 数 中 只 获取 了 当前 的 经 纬度 数据 , 后 续 还 需要 对 此 部 分 内 容 进 
行 修改 和 完善 。 
在 JavaScript 中 添加 stop0 函 数 ， 用 于 停止 对 于 地 理 位 置 的 实时 监听 。 相 关 代 码 如 下 : 














// 停 止 地 理 位 置 的 实时 更 新 

function stop() { 
// 停 止 地 理 位 置信 息 的 监听 第 
navigator.geolocation.clearWatch (watchID); 7 
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上 述 代码 将 在 按钮 显示 为 “完成 运动 ”按钮 时 单 击 被 调用 。 
2. 腾讯 地 图 API 的 调用 
目前 市 面 上 有 多 种 定位 服务 API 向 开发 者 提供 , 例如 百度 地 图 、 高 德 地 图 和 腾讯 地 图 。 
腾讯 地 图 目前 更 名 为 腾讯 位 置 服务 , 其 中 免费 提供 的 Web 地 图 接口 可 以 适 配 手 机 及 计算 机 
端的 浏览 器 ， 并 且 可 以 实现 本 项 目 所 需 的 轨迹 绘制 功能 。 由 于 腾讯 地 图 API 的 轨迹 绘制 功 
能 为 免费 接口 ， 无 须 申 请 账号 和 密 钥 即 可 在 开发 的 页 面 中 使 用 ， 因 此 这 里 使 用 腾讯 地 图 的 
JavaScript API 来 实现 地 图 与 自 定义 形状 线条 的 绘制 。 
首先 需要 在 <head> 首 尾 标签 中 加 入 调用 腾讯 地 图 API 的 语句 ， 相 关 代码 修改 后 如 下 : 
<head> 
<meta charset="utf-8"> 
<title> 记 录 运 动 轨迹 </title> 
<meta name="viewport" content="width=device-width, initial-scale= 
1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
<script charset="utf-8" src="http://map.qq.com/api/js?v= 2.exp"> 
</script> 
</head> 




















通过 上 述 语句 可 获得 地 图 显示 与 绘制 自 定义 形状 功能 接口 ， 并 且 当 前 无 须 申 请 密 钥 。 
腾讯 地 图 中 关于 地 图 绘制 的 语法 格式 如 下 : 





Var map = new .maps.Map (mapContainer, options); 


其 中 变量 名 称 map 可 以 自 定义 ， 参 数 解释 如 下 。 
。 mapContainer: 该 参数 为 必 填 内 容 ， 需 要 填 入 一 个 页 面 上 的 <div> 元 素 对 象 用 于 绘制 


地 图 画面 。 
。 options: 该 参数 为 可 选 内 容 ， 可 以 用 于 初始 化 地 图 的 中 心 点 坐标 、 放 大 级 别 等 。 
例如 : 


Var map = new qq.maps.Map (document .getElementById("container"), { 
center : new qq.maps.LatLng(39.13455, 202.34524)，, 


zoom : 14 





上 述 代 码 表示 将 地 图 绘制 在 id="container" 的 <div> 元 素 中 ， 并 且 其 中 心 点 经 纬度 坐标 
为 (39.13455, 202.34524)， 放 大 级 别 为 14。 

绘制 运动 轨迹 的 思路 是 使 用 数组 记录 每 一 次 获取 到 的 经 纬度 数据 ， 然 后 利用 腾讯 地 图 
中 关于 折线 绘制 的 原理 将 坐标 点 相连 即 可 形成 运动 轨迹 画面 。 

腾讯 地 图 中 关于 折线 绘制 的 语法 格式 如 下 : 


其 中 polylineOptions 表示 一 系列 折线 设置 的 参数 , 可 使 用 的 参数 名 称 与 参考 值 如 表 7-1 
所 示 。 





表 7-1 腾讯 地 图 API 折线 绘制 参数 polylineOptions 的 相关 属性 一 览 表 





属性 名 称 类 型 解 释 
clickable Boolean 折线 是 否 允 许 被 单 击 。true 为 可 单 击 ，false 为 不 可 单 击 
cursor String 鼠标 悬浮 在 折线 上 的 样式 
editable Boolean 多 边 形 是 否 可 编辑 形状 。true 为 可 编辑 ，false 为 不 可 编辑 
map qq.maps.Map 用 于 绘制 折线 的 地 图 
path Array 1-V 个 经 纬度 坐标 构成 的 数组 ， 表 示 折 线 的 绘制 路 径 
strokeColor Color 折线 线条 的 颜色 ， 使 用 CSS 中 的 任意 一 种 颜色 表示 方法 均 可 
strokeDashStyle String 折线 线条 的 样式 ， 共 有 两 种 ，solid 为 实 线 ，dash 为 虚线 
stroke Weight Number 折线 线条 的 宽度 。 数 字 越 大 ， 线 条 越 宽 
visible Boolean 折线 是 否 可 见 。true 为 可 见 ，false 为 不 可 见 
ZzIndex Number 折线 在 页 面 上 的 z-index 值 

(来 源 ， 腾讯 位 置 服务 参考 手册 。) 

例如 : 

path: [ 


new qq.maps.LatLng(59.11, 202.15), 
new qq.maps.LatLng(59.12, 202.15), 
new qq.maps.LatLng(59.13, 202.15) 
]; 
var polygon = new qq.maps.Polyline({ 
map : map, 
path : path, 
// 自 定义 轨迹 颜色 
strokeColor : "#00FF00"， 
// 自 定义 轨迹 宽度 
StrokeWeight : 10 








上 述 代 码 表示 将 在 包含 地 图 画面 的 元 素 中 绘制 宽度 为 10 像素 的 绿色 实 线 运 动 轨迹 。 
轨迹 坐标 点 的 来 源 为 变量 path 数组 中 的 3 组 经 纬度 数据 ,按照 先后 顺序 连接 形成 完整 轨迹 。 

在 掌握 了 腾讯 地 图 API 关 于 运动 轨迹 绘制 的 基础 部 分 语法 后 已 经 可 以 实现 本 项 目 中 需 
要 的 功能 ， 接 下 来 将 对 项 目 中 的 JavaScript 代码 进行 进一步 补充 。 

首先 在 JavaScript 中 声明 数组 变量 path 用 于 存放 实时 监控 获取 到 的 每 一 次 地 理 位 置 数 
据 以 及 变量 center 用 于 记录 当前 的 地 图 中 心 点 坐标 。 相 关 代码 如 下 : 

// 用 于 记录 运行 轨迹 一 系列 坐标 点 的 数组 

var path = []; 

// 地 图 中 心 点 坐标 


Var center; 


修改 showPosition(0) 函 数 ， 将 每 次 获取 到 的 经 纬度 数据 存放 在 path 数组 中 。 相 关 
JavaScript 代码 修改 后 如 下 : 














function showPosition(position) { 
// 获 取 当 前 经 纬度 


Var lat = position.coords.latitude; 
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Var long = position.coords.longitude; 


// 重 置地 图 中 心 点 坐标 位 置 


center = new qq.maps.LatLng(lat, long); 
// 更 新 path 数 组 ， 添 加 当前 经 纬度 坐标 
path.push (new qq.maps.LatLng (lat, long)); 


上 述 代码 表示 每 次 获取 到 最 新 的 经 纬度 数据 后 都 将 转换 为 腾讯 地 图 API 中 的 
qq-maps.LatLng 格式 坐标 ， 并 且 将 该 坐标 对 象 添加 到 path 数组 中 。 

在 JavaScript 中 声明 自 定 义 名 称 的 drawMap() 方 法 用 于 绘制 地 图 和 运动 轨迹 。 

JavaScript 中 drawMap() 方 法 的 完整 代码 如 下 : 


绘制 地 图 与 运动 轨迹 
Ce drawMap () { 
var map = new qq.maps.Map (document .getElementByYId ("container")，({ 
// 地 图 的 中 心地 理 坐 标 
center : center, 
zoom : 14 
1); 











// 设 置 轨迹 样式 
var polygon = new qq.maps.Polyline({ 
map : map, 
path : path, 
// 自 定义 轨迹 颜色 
strokeColor : "#00FF00"， 
// 自 定义 轨迹 宽度 
StrokeWeight : 10 





上 述 代 码 表示 地 图 将 绘制 在 id="container" 的 <div> 元 素 中 ， 并 且 其 中 心 点 经 纬度 坐标 
为 实时 获取 的 最 新 坐标 位 置 ， 地 图 放大 级 别 为 14。 在 地 图 上 绘制 的 轨迹 折线 为 线 宽 为 10 像素 
的 绿色 线条 。 

最 后 在 实时 更 新 函数 showPosition0 中 添加 drawMap0 方 法 ， 表 示 每 当 获 取 到 最 新 的 经 
纬度 就 在 地 图 上 重新 绘制 运动 轨迹 。 相 关 JavaScript 代码 修改 后 如 下 : 


function showPosition(position) { 
// 获 取 当 前 经 纬度 
var lat = position.coords .latitude7 
var long = position.coords.longitude; 
// 重 置地 图 中 心 点 坐标 位 置 
center = new qq.maps.LatLng(lat, long); 
// 更 新 path 数 组 ， 添 加 当前 经 纬度 坐标 
path.push (new qq.maps.LatLng (lat, long)); 
// 绘 制 地 图 





drawMap (); 





此 时 运动 轨迹 绘制 的 功能 已 经 实现 ， 运 行 效果 如 图 7-7 所 示 。 
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图 7-7 开始 与 结束 按钮 的 切换 效果 
计时 功能 的 实现 


本 节 主 要 介绍 计时 功能 的 实现 。 当 用 户 单 击 “ 开 始 跑步 ”按钮 后 计时 开始 ， 页 面 最 下 
方 的 时 间 会 每 秒 递 增 ， 直 到 用 户 单 击 了 “结束 跑步 ”按钮 计时 停止 ， 页 面 显示 总 时 长 并 且 
不 再 继续 变化 。 

首先 对 计时 功能 进行 一 些 初始 化 工作 : 获取 用 于 显示 时 间 的 <span> 对 象 ， 初 始 化 时 、 
小 、 秒 数值 为 0， 声明 计时 器 用 于 每 秒 更 新 计时 数据 。 相 关 JavaScript 代码 如 下 : 


(c) 完成 记录 页 面 效 果 


7.2.4 


// 获 取 时 间 显示 对 象 
var time = document .getElementById ("time"); 


分 、 秒 


/7 计时 使 用 的 时 、 
a = 
var m 
Var s 
// 计 府 吕 用 I 计算 运动 总 时 长 


var timer; 





在 JavaScript 中 自 定义 函数 startTimeO 用 于 每 秒 更 新 计时 信息 ， 相 关 代码 如 下 : 
// 获 取 当 前 时 间 


function startTim 


i 分 、 稍 名 家 为 数 以 便 进行 白 增 或 赋值 


= parseInt (s); 





m = parseInt (m); 

h = parseInt (h); 

// 每 秒 变量 s 先 自 增 1 

S++? 

if (s == 
/7 和 时 徐 已 人 达到 6 则 归 0 
9/ 分钟 自 增 1 第 
In+ 十 7 

} 7 





Ei 
HTML5 地 理 宅 位 4PI 项 月 





HTML5 克 页 户 纲 族 矿 实战 





if (m== 60) { 
// 如 果 分 钟 也 达到 60， 则 归 0 


m= 0; 
// 小 时 自 增 1 


he? 





if (h < 10) 
h = "0" + hz// 以 确保 0 一 9 时 也 显示 成 两 位 数 


if (m < 10) 
m = "0" + m;// 以 确保 0 一 9 分 钟 也 显示 成 两 位 数 


if (s < 10) 
5 = "0" + s;// 以 确保 0 一 9 秒 也 显示 成 两 位 数 
time.innerHTML =h+":" +m+i":"+Ss; 
} 


修改 stop0 函 数 ， 添 加 每 秒 更 新 计时 功能 。 相 关 JavaScript 代码 如 下 : 


// 开 始 实时 更 新 地 理 位 置 
function start() { 


// 重 置 时 、 分 、 秒 
全 





m 


s=0; 
// 每 秒 更 新 一 次 时 间 
timer = setInterval ("startTime()", 1000); 





修改 stopO 函 数 ， 添 加 清除 计时 器 功能 。 相 关 JavaScript 代码 如 下 : 


// 停 止 地理 位 置 的 实时 更 新 
function stop() { 
navigator.geolocation.clearWatch (watchID); 


// 清 除 计时 器 


clearIinterval (timer); 





此 时 本 项 目 已 全 部 完成 ， 运 行 效果 如 图 7-8 所 示 。 
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图 7-8 计时 与 运动 轨迹 绘制 效果 图 


7.2.5 完整 代码 展示 








HIMLS 完整 代码 如 下 : 

于 <!DOCTYPE html> 

2 <html> 

3 <head> 

4. <meta charset="utf-8"> 

5 <title> 记 录 运 动 轨迹 </title> 

6 <meta name="viewport" content="width=device-width, initial- 
scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/> 

Eh <scriptcharset="utf-8"src="http://map.qq.com/api/js?v=2.exp"> 
</script> 

8 <style> 

分。 html, body { 

10. height: 100%; 

1 margin: Opx; 

二。 padding: Opx 

Ey } 

3 #container { 

35。 width: 100%; 

16 . height: 100% 

Ts } 

18. #bar { 

19s position: relative; 

20. z-index: 99; 

21s left: 0%; 

top: 75%; 

23; text-align: center; 

24. vertical-align: middle; 

六 height: 25%; 

26. font-size: 1.2em; 

村 background-color: white; 

4 } 

29。 #btn { 

30. position: relative; 

31. background-color: #00FD00; 

32-。 border: none; 

33. outline: none; 

34. width: 30%; 

35。 margin-top: 25px; 

36. padding: 1l0px; 

汪汪 } 

38 . #info { 

E margin: 10px; 

40. padding: 1l0px; 

汪 全 二 } 

Lp </style> 

43. </head> 

44. <body> 

45. <div id="container"> 

46. <div id="bar"> 

47. <button id="btn" onclick="toggle()"> 

48. 开始 跑步 

49. </button> 

S50 <div id="info"> 第 

Ss 总 时 长 : <span id="time">00:00:00</span> 

5 </div> 村 
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</div> 
</div> 
<script> 
// 标 记 当 前 运动 状态 ， 初 始 值 表示 尚未 开始 运动 
Var status = "Stop”7 
// 获 取 按 钮 对 象 
Var btn = document .getElementById ("btn") 
// 获 取 时 间 显 示 对 象 
Var time = document .getElementById ("time"); 
// 计 时 使 用 的 时 、 分 、 秘 
var h = 07 
Var m= 07 
var 5 = 0; 
// 用 于 记录 运行 轨迹 一 系列 坐标 点 的 数组 
var path = []; 
// 地 图 中 心 点 坐标 
Var center; 
// 计 时 器 用 于 计算 运动 总 时 长 
Var timer; 
// 实 时 监听 用 户 地 理 位 置 变化 的 ID 


Var WatchID7 


function toggle() { 

// 当 前 为 非 运动 状态 

if (status == "stop") { 
// 更 新 状态 为 开始 运动 
status = "start"; 
// 更 新 按钮 显示 的 文字 内 容 
btn.innerHTML = "结束 跑步 "; 
// 开 始 实时 更 新 地 理 位 置 
start (); 

} else if (status == "start") { 
// 更 新 状态 为 停止 
status = "stop"; 
// 更 新 按钮 显示 的 文字 内 容 
btn.innerHTML = "开始 跑步 "; 
// 停 止 地 理 位 置 的 实时 更 新 
stop () 7 


上 


// 开 始 实时 更 新 地 理 位置 
function start() { 
// 清 空 path 数 组 中 的 原 有 数据 
path = []; 
// 重 置 时 、 分 、 秒 
he 
m 0, 
s= 0; 
// 每 秒 更 新 一 次 时 间 
timer = setInterval ("startTime()", 1000); 
// 获 取 用 户 当前 的 定位 信息 


navigator.geolocation.getCurrentPosition (showPosition); 


// 开 始 实时 更 新 地 理 位 置信 息 


watchID= navigator.geolocation.watchPosition (showPosition, 





109。 
110. 
111. 
站 名 儿 
113s 
114. 
115s 
116. 
Ls 
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120. 
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L222。 
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153; 
154. 
155: 
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158. 
159. 
160. 
161. 
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164. 





showError, options); 
} 


// 停 止 地 理 位 置 的 实时 更 新 


function stop() { 


. 


// 停 止 地 理 位 置信 息 的 监听 
navigator.geolocation.clearWatch (watchID) 7 
// 清 除 计时 器 


clearInterval (timer); 


function showPosition(position) { 


} 


// 获 取 当 前 经 纬度 

var lat = position.coords.latitude; 

var long = position.coords.longitude; 

// 重 置地 图 中 心 点 坐标 位 置 

center = new qq.maps.LatLng(lat, long); 
// 更 新 path 数 组 ， 添 加 当前 经 纬度 坐标 

path.push (new qq.maps.LatLng (lat, long)); 
// 绘 制 地 图 

drawMap (); 


function showError(error) { 


} 


switch(error.code) { 

Case error.PERMISSION DENIED: 
alert ("用 户 拒 绝 了 地 理 定位 的 请 求 。") ; 
break; 

Case error.POSITION UNAVAILABLE: 
alert ("位 置信 息 不 可 用 。"); 
break; 

case error.TIMEOUT: 


alert ("请 求 超时 。")， 


break; 

case error.UNKNOWN ERROR: 
alert (" 未 知 错误 发 生 。") ; 
break; 


Var options = { 


} 


enableHighAccuracy : true, 
maximumAge : 2000, 
timeout : 2000 


/ /绘制 地 图 与 运动 轨迹 


function drawMap() { 


Var map = new qq.maps.Map (document. getElement ById 


("container"), { 


// 地 图 的 中 心地 理 坐 标 
center : center, 
zoom : 14 

Ms 


// 设 置 轨迹 样式 
Var polygon = new qq-maps.Polyline({ 
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165. map : map, 

166. path : path, 

于 而 // 自 定义 轨迹 颜色 

168 . strokeColor : "#00FF00"， 
169. // 自 定义 轨迹 宽度 

170. StrokeWeight : 10 

71s 让 这 

了 } 

Lis 

174. // 获 取 当 前 时 间 

75: function startTime() { 

LIS // 将 时 、 分 、 秒 转换 为 整数 以 便 进行 自 增 或 赋值 
Ts s = parseInt(s); 

178 . m= parseInt (m); 

证 h = parseInt (h); 

180. 

LOE // 每 秒 变量 5 先 自 增 1 

82。 S++? 

183. if (s == 60) { 

184. // 如 果 秒 已 经 达到 60， 则 归 0 
1865s s= 107 

186. // 分 钟 白 增 1 

187, m++? 

188. } 

199。 if (m == 60) { 

190 . // 如 果 分 钟 也 达到 60， 则 归 0 
上 上 9。 m= 0; 

192. // 小 时 自 增 1 

193。 h++; 

194. } 

195; 

196. 4£ Ah < 10} 

97 h= "0"+h; 

198. // 以 确保 0 一 9 时 也 显示 成 两 位 数 
199% if (m < 10) 

200. 用 三 0" 十 -三 

201. // 以 确保 0 一 9 分 钟 也 显示 成 两 位 数 
202 . if (s < 10) 

203, v= "0 $98 

204. // 以 确保 0 一 9 秒 也 显示 成 两 位 数 
205 . 

206 . time.innerHTML =h+":"+m+":"+Ss; 
2 } 

208. </script> 

209. </body> 


210. </html> 
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设计 实例 ， 一 是 基于 HIML5 











本 章 主要 包含 了 两 个 基于 HTML5 Web 存储 API 的 应 上 
Web 存储 API 的 网 页 主题 切换 的 设计 与 实现 ， 二 是 基于 HTML5 Web 存储 API 的 网 页 日 志 
本 的 设计 与 实现 。 在 网 页 主题 切换 项 目 中 ， 主 要 难点 为 如 何 即时 重 置 网 页 主题 颜色 以 及 使 
localStorage 的 存储 与 读 取 技术 ;在 网 页 日 志 本 项 目 中 ， 主 要 难点 为 使 用 localStorage 的 








有 
存储 与 读 取 技 术 实现 日 志 的 保存 、 读 取 和 删除 功能 。 











本 章 学 习 目 标 : 
。 学 习 如 何 综合 应 用 HTML5 Web 存储 API、CSS 与 JavaScript 开发 网 页 主题 切换 项 目 ; 
。 学 习 如 何 综合 应 用 HTML5 Web 存储 API、CSS 与 JavaScript 开发 网 页 日 志 本 项 目 。 


8.1 基于 Web 存储 技术 的 网 页 主题 设置 


【 例 8-1】 基于 Web 存储 技术 的 网 页 主题 切换 设置 

功能 要 求 : 使 用 Web 存储 中 的 localStorage 技术 可 以 把 用 户 对 用 网 页 主题 样式 设置 的 
内 容 永 久 存储 下 来 。 本 例 将 实现 一 个 网 页 设置 页 面 ， 用 户 可 以 自 定义 页 面 的 主题 颜色 与 字 
体 风格 并 将 其 存储 在 localStorage 中 ， 当 重新 加 载 该 页 面 时 会 显示 上 一 次 保存 的 样式 要 求 。 
运行 效果 如 图 8-1 所 示 。 
S- -En D HMis web + 
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(b) 保存 并 更 新 颜色 设置 效果 





(a) 页 面 首 次 加 载 效果 


图 8-1 更 新 页 面 主题 颜色 的 效果 


8.1.1 界面 设计 
本 节 主 要 介绍 网 页 的 界面 布局 设计 ， 包 含 使 用 HTMLS 新 增 的 文档 结构 标签 架构 整个 


<select> 标 签 制作 下 拉 菜 单 选项 。 

















页 面 布 局 ， 以 及 使 
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1. 使 用 HTMLS 新 增 的 文档 结构 标签 制作 整个 网 页 布局 

在 页 面 的 <body> 首 尾 标签 中 使 用 <header>、<div id="container"> 和 <footer> 标 签 划分 出 
页 眉 、 主 体 与 页 脚 部 分 ， 并 分 别 使 用 标题 标签 <h1]> 和 <h2> 在 页 眉 与 页 脚 中 填写 标题 。 相 关 
HIML5 代码 如 下 : 




















<body> 
<header> 
<hl>HTML5 Web 存 储 示 例 </h1> 
</header> 
<div id="container"></div> 
<footer> 
<h2>Copyrightgcopy;: ZWJ 2016-2020 All Rights Reserved.</h2> 
</footer> 
</body> 


此 时 还 需要 CSS 文件 辅助 泻 染 样式 ， 因 此 在 本 地 css 文件 夹 中 创建 style.css 文件 ， 并 
在 <head> 首 尾 标签 中 声明 对 CSS 文件 的 引用 。 相 关 HTMLS5 代码 片段 如 下 : 


<head> 
<meta charset="utf-8" > 









<title>HTML5 Web 存 储 示例 </title> 
<link rel="stylesheet" href="css/style.css"> 
</head> 





在 CSS 文件 中 为 页 面 设置 初始 样式 ， 主 要 内 容 如 下 。 

。 网 页 主体 : 页 面 背景 颜色 为 灰色 ， 文 本 居中 显示 ， 最 大 宽度 为 900 像素 。 

。 页 眉 : 背景 颜色 为 橙色 ， 字 体 颜色 为 白色 ， 各 边 的 内 边 距 为 30 像素 ， 上 外 边 距 为 
20 像素 。 其 中 <h1> 标 题 的 字体 大 小 为 40 像素 ， 各 边 的 外 边 距 为 0 像素 。 

。 页 脚 : 背景 颜色 为 橙色 ， 字 体 颜色 为 白色 ， 各 边 的 内 边 距 为 15 像素 。 其 中 <h2> 标 
题 的 字体 大 小 为 14 像素 。 

相关 CSS 代码 如 下 : 











/* 整 体 样式 设置 */ 


body { 
background-color: #CCCCCC; 
margin: Opx auto; 
max-width: 900px; 
text-align: center; 

} 

header, footer { 
background-color: orange; 
Color: #FFFFFF; 
text-align: center; 

上 

headert{ 
padding:30px; 
margin-top: 20px; 

} 

header hl { 
font-size: 40px; 
margin: Opx; 

} 

footert{ 








padding:15px; 


} 

footer h2 { 
font-size: 14px; 

} 


此 时 还 需要 进一步 添加 页 面 的 设置 内 容 ， 即 用 于 提供 自 定 义 页 面 主题 颜色 的 样式 
选项 。 

2. 设置 用 户 自 定义 页 面 颜色 的 区 域 布局 

在 id="container" 的 <div> 中 使 用 <section>、<article>、<header> 和 <footer> 标 签 划分 出 段 
落 的 页 眉 、 主 体 与 页 脚 部 分 。 相 关 HITMLS 代码 片段 修改 后 如 下 : 


<div id="container"> 
<section> 
<article> 
<header> 
<h1> 页 面 设置 </h1> 
</header> 
<footer></footer> 
</article> 
</section> 
</div> 


在 段落 的 页 眉 和 页 脚 之 间 加 入 下 拉 菜 单 选项 和 “保存 并 设置 ”按钮 ， 用 于 提供 不 同 颜 
色 的 网 页 样式 选项 ,并 且 用 户 在 选择 后 可 以 单 击 “ 保 存 并 设置 ”按钮 记录 当前 的 设置 要 求 。 
相关 HIML5 代码 片段 修改 后 如 下 : 


<div id="container"> 
<section> 
<article> 
<header> 
<h1> 页 面 设置 </h1> 
</header> 
<div> 
主题 颜色 : 
<aelect> 
<option value="red"> 红 色 </option> 
<option value="orange"> 橙 色 </option> 
<option value="yellow"> 黄 色 </option> 
<option value="green"> 绿 色 </option> 
<option value="blue"> 蓝 色 </option> 
<option value="purple"> 紫 色 </option> 
< /Select> 
</div> 
<button> 保 存 并 设置 </button> 
<footer></footer> 
</article> 
</section> 
</div> 


在 CSS 文件 中 为 用 户 自 定义 颜色 区 域 定义 初始 样式 ， 主 要 内 容 如 下 。 


。 <div> 元 素 : 背景 颜色 为 白色 。 
。 <section> 元 素 : 宽度 为 60%， 各 边 的 内 边 距 为 30 像素 ， 外 边 距 设置 为 auto， 以 便 
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居中 显示 。 

。 <article> 元 素 : 背景 颜色 为 浅 灰 色 ， 各 边 的 内 边 距 为 10 像素 。 其 中 的 页 眉 、 页 脚 各 
边 的 内 边 距 为 5 像素 ， 标 题 <h1> 的 字体 大 小 为 18 像素 。 

。 <select> 和 <button> 元 素 : 各 边 的 外 边 距 为 10 像素 ， 字 体 大 小 为 16 像素 。 

相关 CSS 代码 如 下 : 

/*<div id="container"> 的 内 部 样式 设置 */ 


#container { 
background-color: #FFF; 








section { 

width: 60%; 
padding: 30px; 
margin:auto; 


article { 
background-color: #EEE; 
padding: 10px; 


article header, article footer { 
padding: 5px; 


article hl { 
font-size: 18px; 


select, button { 
margin: 10px; 
font-size: 16px; 











此 时 页 面 布局 就 全 部 完成 了 ， 运 行 效果 如 图 8-2 所 示 。 
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| Ca 使 用 localStorage 存 储 记录 用 户 设置 html 四 至 
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图 8-2 网 页 日 志 本 的 界面 设计 效果 图 


1 图 8-2 可 见 ， 当 前 网 页 主题 颜色 为 橙色 效果 。 下 一 节 将 介绍 如 何 根据 下 拉 菜 单 选项 
保存 并 更 新 页 面 颜色 。 


8.1.2 重 置 网 页 主题 颜色 的 实现 
当 用 户 在 下 拉 菜 单列 表 中 选择 了 新 的 主题 颜色 后 ， 单 击 “ 保 存 并 设置 ”按钮 将 当前 设 























置信 息 保 存在 localStorage 中 ， 并 且 实 时 更 新 页 面 样式 。 
在 页 面 中 为 下 拉 菜 单元 素 <select> 添 加 id="colorSelector"， 以 便 可 以 在 JavaScript 中 获 
取 其 中 的 选项 值 。 相 关 HIMLS 代码 片段 修改 后 如 下 : 


<div id="container"> 





主题 颜色 : 


<select id="colorselector"> 
</select> - 

</div> 

在 JavaScript 中 首先 使 用 getElementsByTagName() 函 数 获取 页 面 上 所 有 的 页 眉 、 页 脚 


对 象 等 待 更 新 颜色 ， 并 且 声明 变量 bgColor 用 于 记录 当前 页 面 的 主题 颜色 。 相 关 JavaScript 
代码 如 下 : 
var x document .getElementsByTagName ("header"); 


Var Y document .getElementsByTagName ("footer"); 
Var bgColor; 























在 JavaScript 中 创建 自 定义 函数 saveSettings0 用 于 保存 当前 用 户 选择 的 主题 颜色 。 相 
关 JavaScript 代码 如 下 : 
// 保 存 当前 设置 内 容 


function saveSettings () { 
// 获 取 当 前 下 拉 菜 单 中 的 颜色 
bgColor = document .getE1lementBVYId ("colorSelector") .value; 
// 在 localStorage 中 保存 当前 颜色 
localStorage.setItem('bgColor', bgColor); 
// 在 页 面 上 更 新 颜色 样式 


ShowColor (); 





上 述 代 码 首 先 获取 了 id="colorSelector" 的 <selec 亿 元 素 中 的 选项 值 ， 然 后 使 用 setItem() 
方法 将 其 保存 到 localStorage 中 , 该 方法 保存 的 数据 不 会 随 着 浏览 器 关闭 而 丢失 。 由 于 更 新 
颜色 样式 的 代码 片段 在 后 续 刷 新 页 面 时 还 会 被 使 用 ， 因 此 将 这 段 内 容 另 外 保存 到 自 定义 函 
数 showColor() 中 进行 调用 。 

在 JavaScript 中 创建 自 定义 函数 showColor0 用 于 实时 更 新 页 面 上 全 部 页 眉 、 页 脚 的 颜 
色 。 相 关 JavaScript 代码 如 下 : 

// 实 时 更 新 颜色 样式 

function showColor() { 

for (var i = 0; i < x.length; i++) { 


x[i] .style.backgroundColor = bgColor; 
y[i].style.backgroundColor = bgColor; 








} 





上 述 代 码 使 用 了 for 循环 语句 遍历 所 有 的 页 眉 、 页 脚 ， 并 依次 将 其 中 的 页 眉 、 页 脚 的 
backgroundColor 属性 更 新 为 当前 bgColor 指 代 的 颜色 。 由 于 本 例 中 的 页 眉 、 页 脚 都 是 成 对 
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出 现 的 ， 因 此 数量 相同 ， 任 意 循环 x.length 或 ylength 次 均 可 。 
最 后 需要 将 saveSettings0 添 加 到 按钮 <button> 的 onclick 事件 中 ， 以 便 在 用 户 单 击 按钮 
时 触发 保存 设置 的 动作 。 修 改 后 的 HIMLS 片段 如 下 : 


<div id="container"> 











<button onclick="saveSettings () "> 保存 并 设置 </button> 


</div> 





此 时 保存 并 更 新 页 面 主题 颜色 的 功能 已 全 部 实现 ， 运 行 效果 如 图 8-3 所 示 。 





D WTS webu x 
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CC 使 用 focalStorage 存 依 忆 好 用 户 设置 html 








(a) 页 面 首次 加 载 效果 (b) 保存 并 更 新 颜色 设置 效果 
图 8-3 更 新 页 面 主题 颜色 的 效果 

由 图 8-3 可 见 ， 页 面 首 次 加 载 时 的 主题 颜色 为 橙色 效果 ， 当 从 下 拉 菜 单 中 选择 了 其 他 
颜色 保存 时 页 面 会 自动 更 新 样式 。 下 一 节 将 介绍 如 何 根据 历史 记录 显示 自 定义 的 页 面 
颜色 。 
8.1.3 加载 网 页 主题 颜色 的 实现 

在 JavaScript 中 创建 自 定义 函数 loadSettings0 用 于 加 载 上 一 次 记录 的 主题 颜色 。 相 关 
JavaScript 代码 如 下 : 


// 加 载 历史 设置 
function loadsettings() { 


// 获 取 localstorage 中 保存 的 颜色 数据 
bgColor = localSstorage.getItem('bgColor'); 


if (bgColor != null) { 
ShowColor (); 


} 





在 <body> 标 签 中 添加 onload 事件 , 表示 当 页 面 加 载 完 毕 时 调用 loadSettings() 方 法 立刻 
更 新 页 面 颜色 。 如 果 没 有 历史 数据 ， 则 继续 显示 初始 颜色 。 相 关 HIML5 片段 修改 后 如 下 : 


<body onload="loadSettings()"> 

















</body> 





重新 加 载 页 面 时 会 自动 更 新 主题 颜色 的 功能 已 全 部 实现 ， 运 行 效果 如 图 8-4 所 示 。 
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(a) 页 面 第 2 次 加 载 效果 (b)》Google 浏览 器 调试 模式 中 的 数据 记录 
图 8-4 页 面 主题 颜色 自动 加 载 效果 
由 图 8-4 可 见 ， 网 页 重新 加 载 时 显示 的 页 眉 、 页 脚背 景 颜 色 为 紫色 ， 说 明 历史 记录 颜 
色 成 功 地 被 读 取出 来 并 显示 在 了 页 面 上 。 至 此 所 有 功能 已 全 部 实现 。 


8.1.4 完整 代码 展示 





HTMLS5 文件 代码 如 下 : 

1.<!DOCTYPE html> 

2.<html> 

3。 <head> 

4 <meta charset="utf-8" > 

5 <title>HTML5 Web 存 储 示例 </title> 

6. <link rel="stylesheet" href="css/style.css"> 

7 </head> 

8. <body onload="loadsettings () "> 

9; <header> 

10. <h1l>HTML5 Web 存 储 示例 </h1> 

Ls </header> 

Ts <div id="container"> 

13s <section> 

14. <article> 

5s <header> 

16. <h1> 页 面 设置 </h1> 

27 </header> 

Ls <div> 

19。 主题 颜色 : 

20. <select id="colorSelector"> 

2 <option value="red"> 红 色 </option> 
y+ <option value="orange"> 橙 色 </option> 
wk 国 <option value="yellow"> 黄 色 </option> 
24. <option value="green"> 绿 色 </option> 
25: <option value="blue"> 蓝 色 </option> 
26. <option value="purple"> 紫 色 </option> 
i </select> 

28. </div> 

29. <button onclick="saveSettings()"> 

30. 保存 并 设置 
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Ls </button> 
3 <footer></footer> 
3 </article> 
3 </section> 
5 </div> 
305 <footer> 
<h2>Copyright&copy;: ZWJ 2016-2020 All Rights Reserved.</h2> 
</footer> 
<script> 
Var x = document .getElementsByTagName ("header"); 
Var y = document .getElementsByTagName ("footer"); 
Var bgColor; 
// 加 载 历史 设置 
function loadsettings() { 
// 获 取 localStorage 中 保存 的 颜色 数据 
bgColor = localStorage.getItem('bgColor'); 
if (bgColor != null) { 
ShowColor (); 
} 


} 

// 保 存 当前 设置 内 容 

function saveSettings () { 
// 获 取 当 前 下 拉 菜 单 中 的 颜色 

bgColor = document .getElementById ("colorSelector") .value; 

// 在 localStorage 中 保存 当前 颜色 
localstorage.setItem('bgColor', bgColor); 
// 在 页 面 上 更 新 颜色 样式 


showColor (); 


} 
// 实 时 更 新 颜色 样式 
function showColor() { 
for (var i = 0; i < x.length; i++) { 
x[i] .style.backgroundColor = bgColor; 
y[i] .style.backgroundColor = bgColor; 
} 
} 
</script> 
68 . </body> 
69.</html> 


CSS 文件 代码 如 下 : 


./* 整 体 样式 设置 */ 
.body { 
background-color: #CCCCCC; 








有 

2 

3 

4. margin: Opx auto; 
5 max-width: 900px; 
6 text-align: center; 
7.} 

日 。 


header, footer { 


3: background-color: orange; 
10。 Color: #FFFFFF; 

| 

12.headert{ 

13. padding:30px; 

14. margin-top: 20px; 

Sa 


16.header hl { 





font-size: 40px; 
margin: Opx; 


20.footert{ 
padding:15px; 
= 
23.footer h2 { 
font-size: 14px; 
25.} 
./*<div id="container"> 的 内 部 样式 设置 */ 
-#container { 
background-color: #FFF; 


-} 

.section { 
width: 60%; 
padding: 30px; 


margin:auto; 

-} 

-article { 
background-color: #EEE; 
padding: 10px; 

四 

.article header, article footer { 
padding: 5px; 


2.article hl { 
font-size: 18px; 
-} 
.Select, button { 
margin: 10px; 
font-size: 16px; 





8.2 ”基于 Web 存储 技术 的 网 页 日 志 


【 例 8-2】 基于 Web 存储 技术 制作 网 页 日 志 本 
功能 要 求 : 使 用 Web 存储 中 的 localStorage 
技术 可 id 户 记录 的 日 志 永久 存储 下 来 。 本 De 


例 将 实现 一 个 单 页 面 的 日 志 本 ， 包 括 添加 、 删 ne 
oi Pe 志和 清空 全 部 日 志 3 个 功能 。 aa 
效果 如 图 8-5 所 示 。 


8.2.1 界面 设计 


本 节 主 要 介绍 网 页 日 志 本 的 页 面 布局 ， 包 
括 日 志 记录 区 域 、 功 能 按钮 以 及 历史 日 志 显示 
区 域 3 个 部 分 。 

1. 使 用 <div> 标 签 划分 区 域 

可 以 使 用 块 级 标签 <div> 区 分 两 个 不 同 的 
版 块 : 记 日 志 的 文本 框 和 相关 按钮 ，@ 用 于 
显示 日 志 历 史记 录 。 相 关 HIMLS 代码 片段 如 下 : 


Bn [em | er 


























图 8-5 基于 Web 存储 技术 的 网 页 日 志 本 效果 图 | 第 
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<body> 

<h3> 我 的 日 志 本 </h3> 

<!-- 记 日 志 的 文本 框 和 相关 按钮 --> 
<div></div> 

<!-- 显 示 日 志 历史 记录 --> 
<div></div> 

</body> 





此 时 还 需要 CSS 文件 辅助 泻 染 样式 ， 因 此 在 本 地 css 文件 夹 中 创建 diary.css 文件 ， 并 
在 <head> 首 尾 标签 中 声明 对 CSS 文件 的 引用 。 相 关 HIMLS 代码 片段 如 下 : 


<head> 

<meta charset="utf-8" > 

<title> 我 的 日 志 本 </title> 

<link rel="stylesheet" href="css/diary.css"> 
</head> 


在 CSS 文件 中 为 <div> 标 签 和 页 面 标题 <h3> 标 签 预 设 统一 样式 : 上 、 下 边 距 为 10 像素 ， 
左 、 右 边 距 为 auto， 并 且 文 本 居中 显示 。 相 关 CSS 代码 片段 如 下 : 
div，h31{ 
margin:10px auto7 
text-align:center; 
} 
目前 尚未 在 各 个 <div> 首 尾 标签 之 间 填 充 内 容 , 因此 在 网 页 上 浏览 没有 实际 效果 , 需 等 
待 后 续 补充 。 
2， 使 用 <textarea> 标 签 制作 日 志 记 录 框 
可 以 使 用 HTML5 表单 的 <textarea> 标 签 制作 日 志 记录 框 。 相 关 HIMLS 代码 片段 如 下 : 














<!-- 日 志 记 录 框 --> 





<textarea></textarea> 


在 CSS 文件 中 为 <textarea> 标 签 设置 统一 样式 : 宽 95%、 高 200 像素 ， 文 本 首 行 缩 进 
两 个 字符 ， 文 字 对 齐 方 式 为 左 对 齐 。 相 关 CSS 代码 片段 如 下 : 





textarea{ 
width:95%; 
height:200px; 
text-indent :2em; 
text-align:left; 


} 
3。. 使 用 <button> 标 签 制作 “保存 日 志 ” 和 “删除 全 部 日 志 ” 按 钮 


使 用 <button> 标 签 创建 “保存 日 志 ” 按 钮 和 “删除 全 部 日 志 ” 按 钮 。 相 关 HTMLS5 代 








<!-- 保 在 和 删除 按钮 --> 
<button> 保 存 日 志 </button> 
<button> 删 除 全 部 日 志 </button> 





在 CSS 文件 中 为 <button> 标 签 设置 统一 样式 : 宽 150 像素 、 高 30 像素 ， 上 、 下 边 距 为 
10 像素 。 相 关 CSS 代码 片段 如 下 : 





buttont{ 
width:150px7 
height:30px; 
margin:10px 07 


} 


4. 使 用 <table> 标 签 制作 日 志 历 史记 录 
使 用 <table> 标 签 创建 日 志 历 史记 录 栏 目 ， 并 使 用 <th> 标 签 预先 设置 好 栏目 标题 。 相 关 
HIML5 代码 片段 如 下 : 


<! 一 -显示 日 志 历 史记 录 --> 

<div> 

<table border="1"> 

<caption> 历 史记 录 </caption> 

<tr><th> 序 号 </th><th> 日 志 内容 </th><th> 保 存 时 间 </th><th> 操 作 </th></tr> 
<tbody></tbody> 

</table> 

</div> 


在 CSS 文件 中 为 <table> 标 签 设置 样式 : 宽 95%， 边 距 为 auto， 以 便 实 现 居 中 效果 ; 为 
单元 格 <td> 标 签 设置 统一 样式 : 文本 水 平方 向 左 对 齐 、 垂 直方 向 居中 显示 。 相 关 CSS 代码 
片段 如 下 : 

table{ 

width:95%; 


margin:auto; 
} 























tat{ 
text-align:1left; 
vertical-align:center; 











此 时 界面 设计 部 分 就 全 部 完成 了 ， 运 行 后 在 浏览 器 中 显示 的 效果 如 图 8-6 所 示 。 
回 - -En 
上 口 我 的 日 去 本 x 
CQ 基于 Web 存 储 的 网 页 日 志 本 .html = 
我 的 日 志 本 
开始 写 日 志 
历史 记录 
[ 序号 日 志 内 容 [ 保存 时 间 | 操作 








8-6 网 页 日 志 本 的 界面 设计 效果 图 
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8.2.2 ” 读 取 日志 功能 的 实现 


当 浏览 器 打开 或 者 刷新 时 需要 在 “历史 记录 ”的 表格 中 显示 以 往 的 日 志 内 容 与 记录 时 
间 。 为 <body> 标 签 添加 onload-~"getHistory0" 事 件 , 以 便 快速 更 新 历史 记录 。 其 中 getHistory0 
方法 的 名 称 可 自 定义 ， 该 函数 需要 在 JavaScript 中 声明 。 

为 <body> 标 签 添加 onload 事件 后 的 相关 HIMLS 代码 片段 如 下 : 


[ <body onload="getHistory () "> ] 











此 时 需要 设计 getHistory0 函 数 的 相关 JavaScript 代码 以 便 动态 显示 日 志 的 历史 记录 。 
在 本 地 js 文件 夹 中 创建 diaryjs 文件 ， 并 在 <head> 首 尾 标签 中 声明 对 该 JS 文件 的 引用 。 修 
改 后 的 相关 HIMLS 代码 片段 如 下 : 












<head> 
<meta charset="utf-8" > 
<title> 我 的 日 志 本 </title> 

<link rel="stylesheet" href="css/diary.css"> 
<script src="js/diary.js"></script> 

</head> 


为 表格 的 主体 标签 <tbody> 设 置 id="history", 以 便 可 以 在 JavaScript 中 获取 表格 主体 对 
然后 在 其 内 部 单元 格 中 动态 添加 日 志 内 容 。 修 改 后 的 HTMLS5 代码 片段 如 下 : 

<!-- 显 示 日 志 历 史记 录 --> 

<div> 


<table border="1"> 
<caption> 历 史记 录 </caption> 
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<tr><th> 序 号 </th><th> 日 志 内 容 </th><th> 保 存 时 间 </th><th> 操 作 </th></tr> 
<tbody id="history"></tbody> 

</table> 

</div> 





在 JavaScript 中 声明 getHistory() 方 法 ,用 于 读 取 localStorage 中 已 存储 的 所 有 日 志 记录 。 
可 以 使 用 localStorage 的 length 属性 先 获取 已 保存 的 日 志 数量 ， 然 后 使 用 for 循环 语句 遍历 
每 条 日 志 记录 ， 并 将 其 显示 到 表格 的 单元 格 中 。 

相关 JavaScript 代码 片段 如 下 : 


// 获 取 所 有 历史 记录 
function getHistory(){ 


// 获 取 在 localStorage 中 保存 的 日 志 个 数 

Var length = localStorage .length7 

// 获 取 表格 主体 部 分 Hbody 对 象 

var table = document .getElementBYyId ("history") 7 
// 清 空 表格 内 容 

table.innerHTML = ""; 





// 遍 历 日 志 的 历史 记录 

for (var i=0;i<length;i++){ 
// 获 取 键 名 称 
Var key = localStorage.key (i); 
Var date = new Date(); 





date.setTime (key); 


// 获 取 日 志 记录 时 间 的 本 地 格式 


Var time = date.toLocaleSstring(); 


// 根 据 时 间 戳 获取 日 志 内 容 


Var content = localStorage .getItem(key) 


// 创 建 表格 主体 中 的 一 行 

Var row = table.insertRow (i); 

// 插 入 第 1 个 单元 格 ， 文 本 内 容 为 序号 
row.insertCell (0) .innerHTML = i+1; 

// 插 入 第 2 个 单元 格 ， 文 本 内 容 为 日 志 内 容 

row.insertCell (1) .innerHTML = content; 

// 插 入 第 3 个 单元 格 ， 文 本 内 容 为 日 志 记录 的 时 间 

row.insertCell (2) .innerHTML = time; 

// 插 入 第 4 个 单元 格 ， 内 容 为 “删除 ”按钮 

row.insertCell (3) .innerHTML = '<button"> 删 除 </button>"'; 











其 中 document.getElementById("history") 是 用 于 获取 历史 记录 表格 的 <tbody> 主 体 对 
象 ， 并 使 用 innerHTML 属性 清空 表格 主体 部 分 的 内 容 。 

在 使 用 for 循环 对 日 志 历史 数据 进行 遍历 时 使 用 了 localStorage.key(i) 方 法 获取 每 一 条 
日 志 数据 的 键 名 称 ， 然 后 根据 键 名 称 使 用 了 localStorage.getItem(key) 获 取 到 日 志 的 文本 内 
容 。 由 于 此 时 键 名 称 key 是 时 间 戳 的 文本 内 容 ， 为 了 使 其 在 表格 中 显示 为 正常 的 本 地 时 间 
文本 格式 ， 先 声明 了 一 个 Date 类 型 的 对 象 ， 然 后 使 用 setTime(key) 方 法 将 时 间 戳 转换 为 具 
体 的 时 间 日 期 ， 再 用 toLocaleStringO) 显 示 为 正常 的 文本 内 容 。 


8.2.3 保存 日 志 功 能 的 实现 

为 “保存 日 志 ” 按 钮 提供 单 击 事件 onclick="saveDiary0"， 其 中 saveDiary() 方 法 名 称 可 
自 定义 ， 该 函数 需要 在 JavaScript 中 声明 。 

“保存 日 志 ” 按 钮 添加 单 击 事件 后 的 相关 HIML5 代码 片段 如 下 : 


<button onclick="saveDiary() "> 保存 日 志 </button> 








为 文本 框 <textarea> 标 签 设置 id="diary", 以 使 可 以 在 JavaScript 中 获取 日 志 的 内 容 ， 然 
后 将 其 保存 在 localStorage 数据 中 。 修 改 后 的 HIMLS5 代码 片段 如 下 : 


<!-- 日 志 记录 框 --> 


<textarea id="diary"></textarea> 




















在 JavaScript 中 声明 saveDiary( 方 法 ,用 于 读 取 文 本 框 中 的 日 志 内 容 并 使 用 localStorage 
进行 存储 。 为 了 区 分 不 同日 期 和 时 间 所 记录 的 日 志 ， 使 用 当前 日 期 时 间 转 换 成 的 时 间 惟 作 
为 保存 的 键 名 称 。 

相关 JavaScript 代码 片段 如 下 : 


// 保 存 日 志 内 容 和 
function saveDiary(){ 
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// 获 取 文 本 框 中 的 日 志 内 容 

Var content = document .getElementById("diary") .value; 
// 获 取 当 前 日 期 和 时 间 

Var today = new Date () > 

// 将 当前 日 期 时 间 转 换 为 时 间 截 

Var key = today.getTime(); 





// 以 时 间 戳 为 key 名 称 保存 当前 日 志 
localSstorage.setItem(key, content); 
alert ("日 志 已 保存 ! ") ; 


// 清 空 文本 框 中 的 日 志 ， 等 待 下 一 次 记录 


os tlenonteyi oid ry elu 至 二 全 


// 重 新 加 载 日 志 的 历史 记录 
getHistory() 7 





其 中 document.getElementById("diary").value 用 于 获取 id="diary" 的 文本 框 <textarea> 里 
面 的 日 志 内 容 。 单 击 “ 保 存 日 志 ” 按 钮 后 除了 需要 清空 文本 框 外 还 需要 更 新 历史 记录 的 表 
格 内 容 ， 因 此 在 saveDiary0 方 法 的 最 后 一 句 调 用 了 上 面 实现 的 getHistory0 方 法 ， 用 于 更 新 
日 志 的 历史 记录 。 


8.2.4 删除 日 志 功 能 的 实现 


ee -是 删除 指定 日 期 和 时 间 的 单个 日 志 记录 ;， 二 是 
直接 删除 全 部 的 日 志 记录 。 

和 删除 单个 记录 功能 的 实现 

单个 记录 删除 按钮 是 在 历史 记录 表格 中 动态 生成 的 ， 相 关 代 码 在 JavaScript 文件 的 
getHistory( 方 法 中 ， 因 此 需要 在 JavaScript 中 找到 对 应 的 语句 ， 然 后 为 “删除 ”按钮 提供 
自 定 义 的 单 击 事件 onclick="delDiary(key)"， 其 中 参数 key 需要 替换 成 指定 删除 的 那 条 日 志 
对 应 的 时 间 戳 。 同 样 该 函数 需要 在 JavaScript 中 声明 。 

“删除 ”按钮 添加 单 击 事件 后 的 相关 JavaScript 代码 片段 如 下 : 








// 插 入 第 4 个 单元 格 ， 内 容 为 “删除 ”按钮 


row.insertCell (3) .innerHTML = '<button onclick="delDiary('+key+"')"> 删 除 


</button>'; 








由 于 每 条 日 志 都 有 对 应 的 时 间 戳 ， 因 此 时 间 戳 使 用 getHistory0 方 法 中 获取 到 的 当前 日 
志 时 间 蕉 变量 key 表示 。 变 量 key 不 能 写 在 引号 内 部 ， 因 此 用 单 引 号 断 开 并 使 用 加 号 连接 
前 后 内 容 。 

在 JavaScript 中 声明 delDiary(key) 方 法 , 用 于 删除 指定 键 名 称 为 key 的 日 志 记 录 , 可 直 
接 调用 localStorage 的 removeltem(key) 方 法 完成 该 功能 。 

相关 JavaScript 代码 片段 如 下 : 

// 删 除 指定 日 志 

function delDiary (key){ 

// 根 据 key 名 称 删 除 对 应 的 数据 记录 


localStorage .removeItem (key); 
































alert ("本 条 日 志 已 删除 ! ") ; 


// 重 新 加 载 日 志 的 历史 记录 
getHistory(); 








单 击 “ 删 除 ” 按 钮 后 除了 在 localStorage 中 清空 指定 的 数据 外 还 需要 更 新 历史 记录 的 表 
格 内容 ， 因 此 在 delDiary(key) 方 法 的 最 后 一 句 调 用 了 前 面 已 实现 的 getHistory0 方 法 ， 用 于 
更 新 日 志 的 历史 记录 。 

2. 删除 全 部 记录 功能 的 实现 

为 “删除 全 部 日 志 ” 按 钮 提供 单 击 事件 onclick="clearDiary0"， 其 中 clearDiary() 方 法 
名 称 可 自 定义 ， 该 函数 需要 在 JavaScript 中 声明 。 

“删除 全 部 日 志 ” 按 钮 添加 单 击 事件 后 的 相关 HTML5 代码 片段 如 下 : 


<button onclick="clearDiary() "> 删除 全 部 日 志 </button> 



































在 JavaScript 中 声明 clearDiary0) 方 法 ， 用 于 清空 所 有 的 日 志 记录 ， 可 直接 调用 
localStorage 的 clear() 方 法 完成 该 功能 。 
相关 JavaScript 代码 片段 如 下 : 
// 删 除 全 部 日 志 
function clearDiary(){ 
// 清 空 所 有 日 志 记 录 
localStorage.clear (); 


alert (" 日 志 已 全 部 删除 ! ") ; 


// 重 新 加 载 日 志 的 历史 记录 
getHistory() 7 





} 


单 击 “删除 全 部 日 志 ” 按 钮 后 除了 在 localStorage 中 清空 数据 外 还 需要 更 新 历史 记录 的 
表格 内 容 ， 因 此 在 clearDiary() 方 法 的 最 后 一 句 调用 了 前 面 已 实现 的 getHistory0 方 法 ,用 于 
更 新 日 志 的 历史 记录 。 此 时 整个 项 目 已 经 全 部 完成 。 


8.2.5 完整 代码 展示 
HTMLS 完整 代码 如 下 : 





<!DOCTYPE html> 

4 <html> 

3 <head> 

4. <meta charset="utf-8" > 

Si <title>HTML5 Web 存 储 示例 </title> 

6 <link rel="stylesheet" href="css/diary.css"> 

<script src="js/diary.js"></script> 

WB </head> 

今 。 <body onload="getHistory () "> 

10 . <h3> 我 的 日 志 本 </h3> 

Ts <div> 

和 <h4> 开 始 写 日 志 </h4> 第 
EW: <textarea id="diary"></textarea> 8 
14. SS 
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<button onclick="saveDiary()"> 
保存 日 志 
</button> 
<button onclick="clearDiary()"> 
删除 全 部 日 志 
</button> 
</div> 
<div> 
<table border="1"> 
<caption> 
历史 记录 


</caption> 
<tr> 


<th> 序 号 </th><th> 日 志 内 容 </th><th> 保 存 时 间 </th><th> 
操作 </th> 

SEE 

<tbody id="history"></tbody> 

</table> 
</div> 
</body> 
</html> 





1. ”/*div 与 标题 h3 样 式 */ 

2. div, h3{ 

= margin:10px auto; 
4. text-align:center; 
3a } 

6. /* 文 本 输入 框 样式 */ 

人 textareatf 

Bs width:95%; 

9. height:200px; 

10。 text-indent:2em; 
Ls text-align:1left; 
| 


13. /* 按 钮 样式 */ 
14. buttont{ 


15s width:150px; 
16. height:30px; 
Es margin:10px 0; 
39 .二 


19. /* 表 格 总 体 样式 */ 
20. tablet 


9 width:95%; 

2 margin:auto; 

23。 下 

24.  /* 单 元 格 样式 */ 

25: df 

26. text-align:left; 

pS vertical-align:center; 
28. J} 





JavaScript 文件 diaryjs 的 完整 代码 如 下 : 





1. ”// 获 取 所 有 历史 记录 


人 function getHistory() { 








3 // 获 取 在 localstorage 中 保存 的 日 志 个 数 

4 Var length = localSstorage.length; 

5. // 获 取 表 格 主体 部 分 tbody 对 象 

必 衣 var table = document .getElementByYId("history") ;7 

7 // 清 空 表 格 内 容 

8. table.innerHTML = ""; 

和 9 

0 // 遍 历 日 志 的 历史 记录 

SEE for (var i = 0; i < length; i++) { 

TD // 获 取 键 名 称 

Ls Var key = localStorage.key (i); 

Ls Var date = new Date(); 

LS: date.setTime (key); 

6s 

LR // 获 取 日 志 记录 时 间 的 本 地 格式 

18: var time = date.toLocalestring (); 

19. 

20. // 根 据 时 间 截 获取 日 志 内 容 

2 Var content = localStorage.getItem (key); 

8 

285 // 创 建 表 格 主体 中 的 一 行 

24. Var row = table.insertRow(i); 

5 // 插 入 第 1 个 单元 格 ， 文 本 内 容 为 序号 

266 row.insertCell(0) .innerHTML = i+1; 

3 // 插 入 第 2 个 单元 格 ， 文 本 内 容 为 日 志 内 容 

28 . row.insertCell(1) .innerHTML = content; 

29. // 插 入 第 3 个 单元 格 ， 文 本 内 容 为 日 志 记 录 的 时 间 

30 . row.insertCell (2) .innerHTML = time; 

3 // 插 入 第 4 个 单元 格 ， 内 容 为 “删除 ”按钮 

Ws row.insertCell (3) .innerHTML = '<button onclick="delDiary(' + 
key + ") "> 删除 </button>"'; 

3 } 

34. } 

35 


36. // 保 存 日 志 内 容 
37. function saveDiary() { 


38. // 获 取 文 本 框 中 的 日 志 内 容 





3 Var content = document .getElementById ("diary") .value; 
40. // 获 取 当前 日 期 和 时 间 

41. Var today = new Date(); 

42. // 将 当前 日 期 时 间 转 换 为 时 间 截 

43 . var key = today.getTime (): 

44. 

Ss // 以 时 间 戳 为 key 名 称 保存 当前 日 志 

46. localStorage.setItem(key, content); 

47. alert ("日 志 已 保存 ! "); 

48. 

49. // 清 空 文本 框 中 的 日 志 ， 等 待 下 一 次 记录 

50. document .getElementById("diary") .value = ""; 
STv 

52. // 重 新 加 载 日 志 的 历史 记录 

53s getHistory(); 

54. } 

3 


56. // 删 除 指定 日 志 
57. function delDiary(key) { 
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58. // 根 据 key 名 称 删除 对 应 的 数据 记录 
与 9。 localStorage .removeItem (key) 
60. alert ("本 条 日 志 已 删除 ! ") ; 

61. 

[> 尖 // 重 新 加 载 日 志 的 历史 记录 

63- getHistory() 7 

64。 } 

65. 


66. // 删 除 全 部 日 志 


671. function clearDiary() { 


68. // 清 空 所 有 日 志 记录 

69. localStorage .clear (); 
70. alert ("日 志 已 全 部 删除 ! "); 
Ts 

72: // 重 新 加 载 日 志 的 历史 记录 
Ta getHistory(); 








第 9 章 CSS3 基础 项 目 





本 章 主要 包含 了 两 个 基于 CSS3 技术 的 应 用 设计 实例 ， 一 是 使 用 CSS3 文本 阴影 的 受 
加 制作 特殊 字体 效果 ， 二 是 使 用 CSS3 动画 制作 响应 式 放大 菜单 。 在 特殊 字体 效果 项 目 中 ， 
主要 内 容 包括 火焰 文字 与 霓 虹 文字 两 种 特效 ， 在 放大 菜单 项 目 中 ， 主 要 内 容 是 在 不 依赖 于 
JavaScript 的 情况 下 根据 鼠标 悬浮 的 位 置 放 大 相应 的 菜单 栏目 。 

本 章 学 习 目 标 : 

。 学 习 如 何 综合 应 用 HTMLS 与 CSS3 文本 阴影 制作 特殊 字体 效果 ; 

。 学 习 如 何 综合 应 用 HTMLS 与 CSS3 动画 制作 响应 式 放大 菜单 效果 。 


9.1 使 用 CSS3 文本 阴影 制作 特殊 字体 效果 
【 例 9-1】 用 CSS3 文本 阴影 制作 特殊 字体 效果 


功能 要 求 : 基于 CSS3 文本 阴影 属性 text-shadow 制作 火焰 效果 与 需 虹 效果 的 字体 。 最 
终 效果 如 图 9-1 所 示 。 
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中 C553 文 本 阴影 特 殊 效 时 8 x 


CQ C553 文 本 阴影 特殊 火焰 和 霓 虹 文字 .html 一 


火焰 文字 效果 


震 虹 文字 效果 


图 9-1 用 CSS3 文 字 阴影 制作 火焰 与 党 虹 效果 字体 





9.1.1 整体 设计 

本 节 主 要 介绍 页 面 的 整体 布局 设计 。 

首先 在 页 面 上 添加 两 段 文字 ， 分 别 用 于 制作 火焰 和 过 虹 效 果 。 相 关 HIMLS 代码 片段 
如 下 : 








HTML5 克 页 页 带 帮 矿 笑 此 





<body> 
<dqiv> 火 焰 文字 效果 </div> 
<div> 霓 虹 文 字 效 果 </div> 
</body> 








本 例 使 用 CSS 外 部 样式 表 规定 页 面 样式 。 在 本 地 css 文件 夹 中 创建 shadow.css 文件 ， 
并 在 <head> 首 尾 标签 中 声明 对 CSS 文件 的 引用 。 相 关 HIMLS 代码 片段 如 下 : 





<head> 
<meta charset="utf-8"> 
<title>CSS3 文 本 阴影 特殊 效果 的 应 用 </title> 


<link rel="stylesheet" href="css/shadow.css"> 
</head> 








在 CSS 文件 中 为 <body> 标 羊 式 ， 上 具体 样式 要 求 如 下 。 
。 颜色 : 背景 颜色 为 黑色 ， 字 体 颜 色 为 白色 ; 

。 字体 : 大 小 为 80 像素 ， 加 粗 显 示 ; 

。 边 距 : 各 边 的 内 边 距 为 30 像素 。 

相关 CSS 代码 片段 如 下 : 








/* 页 面 样式 设置 */ 

body { 
background-color: black; 
color: white; 
font-size: 80px; 
font-weight: bold; 
padding: 30px; 





此 时 页 面 效 果 如 图 9-2 所 示 。 
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火焰 文字 效果 
沈 虹 文字 效果 


图 9-2 初始 文本 效果 








由 图 9-2 可 见 ， 需 要 制作 特殊 效果 的 文字 
本 阴影 ， 因此 只 能 看 到 黑色 背景 下 的 白色 文字 。 
芝 实 现 火 燃 效 果 。 


9.1.2 火焰 文字 效果 的 实现 


为 需要 实现 火焰 文字 效果 的 <div> 元 素 添加 id="fire"， 相 关 HIMLS 代码 修改 后 如 下 : 


<body> 
<div id="fire"> 火 焰 文字 效果 </div> 
<div> 霓 虹 文字 效果 </div> 

</body> 








在 CSS 文件 中 使 用 ID 选择 器 为 id="fire" 设 计 样 式 : 各 边 的 外 边 距 为 30 像素 ， 并 使 用 
多 重文 本 阴影 琶 加 制作 火焰 效果 。 
相关 CSS 代码 片段 如 下 : 


/* 火 焰 样 式 */ 
#fire { 
margin: 30px; 
text-shadow: 
0 0 5px #FFF, 
0 0 20px #FEFCC9, 
lO0px -10px 30px #FEEC85, 
-20px -20px 40px #FFAE34, 
20px -40px 50px #EC760C, 
-20px -60px 60px #CD4606, 
0 -80px 70px #973716, 
l0px -90px 80px #451BOE; 








先 在 无 偏 移 的 位 置 上 为 文字 受 加 两 次 不 同 颜 色 和 宽度 的 阴影 ， 然 后 在 文字 的 周围 逐步 
偏 移 受 加 新 的 颜色 ， 其 中 立轴 方向 尽量 往 上 偏 移 ， 形 成 火焰 燃烧 的 效果 。 当 前 的 数值 仅 为 
参考 ， 用 户 可 以 根据 实际 开发 的 情况 自行 修改 。 

当前 运行 效果 如 图 9-3 所 示 。 
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图 9-3 ”火焰 文字 效果 








图 9-3 可 见 ， 当 前 需要 制作 火焰 效果 的 文字 内 容 已 经 显示 在 了 页 面 上 。 下 一 节 将 介 
绍 如 何 使 用 text-shadow 属性 层 芭 实现 壳 虹 效果 。 
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9.1.3 ”有 壳 虹 文字 效果 的 实现 
为 需要 实现 需 虹 文字 效果 的 <div> 元 素 添加 id="neon"， 相 关 HIMLS 代码 修改 后 如 下 : 


<body> 
<qdiv id="fire"> 火 焰 文 字 效果 </div> 
<div id="neon"> 壳 虹 文 字 效 果 </div> 
</body> 


在 CSS 文件 中 使 用 ID 选择 器 为 id="neon" 设 计 样 式 : 各 边 的 外 边 距 为 30 像素 ， 并 使 
用 多 重文 本 阴影 党 加 制作 壳 虹 效果 。 
相关 CSS 代码 片段 如 下 : 


/* 沉 虹 样 式 */ 
#neon { 

margin: 30px; 

text-shadow: 

0 0 1l0px #FFF, 

0 20px #FFF, 
0 30px #FFF, 
0 40px #6ABS5FEF, 
0 70px #6ABSFF, 
0 
0 
0 











80px #6ABSFEF, 
100px #6ABS5FF, 
150px #6ABSFF; 


[一 契 一 夺 一 各 一 时 一 各 一 下 一 





壳 虹 效果 的 原理 是 距离 文字 越 远 显示 越 淡 的 阴影 ， 因 此 所 有 的 阴影 都 在 文本 正 下 方 无 
偏 移 地 欠 加 。 首 先 依次 琶 加 10、20 和 30 像素 的 白色 阴影 ， 以 表现 最 亮 的 光度 ， 然 后 换 成 
霓 虹 的 颜色 (#6AB5FF)〉 从 40 像素 开始 继续 模糊 阴影 的 面积 ， 直 到 最 后 一 层 合 加 为 150 
像素 的 阴影 面积 为 止 。 当 前 的 数值 仅 为 参考 ， 用 户 可 以 根据 实际 开发 的 情况 自行 修改 颜色 
与 阴影 面积 

当前 运 纪行 效果 如 图 9-4 所 示 。 
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图 9-4 赵 虹 文字 效果 





由 图 9-4 可 见 ， 当 前 需要 制作 壳 虹 效果 的 文字 内 容 也 已 经 显示 在 了 页 面 上 。 至 此 使 用 
CSS3 文本 阴影 制作 特殊 字体 效果 已 经 全 部 完成 。 


9.1.4 完整 代码 展示 











完整 的 HTMLS5 代码 如 下 : 

hs <!DOCTYPE html> 

FF <html> 

3 <head> 

旺 <meta charset="utf-8"> 

5 <title>CSS3 文 本 阴影 特殊 效果 的 应 用 </title> 
6。 <link rel="stylesheet" href="css/shadow.css"> 
Ep </head> 

8. <body> 

9. <div id="fire"> 火 焰 文 字 效果 </div> 

10. <div id="neon"> 党 虹 文 字 效果 </div> 

1 </body> 


12. </html> 





完整 的 CSS3 代码 如 下 : 





/* 页 面 样式 设置 */ 

body { 
background-color: black; 
color: white; 
font-size: 80px; 
font-weight: bold; 
padding: 30px; 


1 
2 
3 
4. 
Se 
6. 
了 : 
B's 


} 
9. /* 火 焰 样 式 */ 
10. #fire { 


Ls margin: 30px; 

12， text-shadow: 

了 区。 0 0 Spx #FFF, 

las 0 0 20px #FEFCC9, 

Es lO0px -10px 30px #FEEC85, 
16, -20px -20px 40px #FFAE34, 
ITs 20px -40px 50px #EC760C, 
18:. -20px -60px 60px #CD4606, 
LO 0 -80px 70px #973716, 

20. 10px -90px 80px #451BOE; 
-3 | 


22. /* 壳 虹 样 式 */ 


23. #neon { 


pL margin: 30px; 

25. text-shadow: 

26. 0 0 10px #FFF, 

9 0 0 20px #FFF, 

28: 0 0 30px #FFF, 

29. 0 0 40px #6ABS5FF, 
30。 0 0 70px #6ABS5FF, 
31: 0 0 80px #6ABS5FF, 
32. 0 0 100px #6ABSFE, 
33: 0 0 150px #6ABS5FF; 
| 
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9.2 ”使 用 CSS3 动画 制作 响应 式 放 大 菜单 


【 例 9-2】 用 CSS3 动画 制作 响应 式 放大 菜单 
功能 要 求 : 基于 CSS3 动画 技术 制作 响应 式 放大 菜单 ， 当 鼠标 悬浮 于 菜单 选项 上 时 产 
生 对 该 菜单 进行 放大 的 动画 效果 。 最 终 效果 如 图 9-5 所 示 。 
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CSS3 响 应 式 菜单 的 设计 与 实现 CSS3 响 应 式 菜单 的 设计 与 实现 


HTML5 CSS3 HTML5 CSS3 


(a) 菜单 选项 的 初始 状态 (b) 鼠标 悬浮 时 菜单 选项 自动 放大 
图 9-5 用 CSS3 动画 制作 响应 式 放大 菜单 





9.2.1 整体 设计 


本 节 主 要 介绍 页 面 的 整体 布局 设计 。 
首先 创建 响应 式 菜单 页 面 ， 在 页 面 上 分 别 添加 标题 、 水 平 线 并 预 留 菜单 选项 空间 。 相 
关 HTMELS5 代码 片段 如 下 : 


<body> 
<!-- 标 题 --> 
<h3>CSS3 响 应 式 菜单 的 设计 与 实现 </h3> 
<! 一 水平线 --> 
<hr /> 
<! 一 -菜单 栏目 --> 
<nav></nav> 

</body> 


本 例 使 用 CSS 外 部 样式 表 规 定 页 面 样式 。 在 本 地 css 文件 夹 中 创建 menu.css 文件 ， 并 
在 <head> 首 尾 标签 中 声明 对 CSS 文件 的 引用 。 相 关 HIMLS 代码 片段 如 下 : 
<head> 
<meta charset="utf-8"> 
<title>CSS3 响 应 式 菜单 的 设计 与 实现 </title> 
<link rel="stylesheet" href="css/menu.css"> 
</head> 


在 CSS 文件 中 为 导航 菜单 标签 <nav> 设 置 样式 ， 具 体 样式 要 求 如 下 。 

















。 尺寸 宽度 为 500 像素 ; 

。 文本 : 居中 显示 ; 

。 字体 : 大 小 为 30 像素 ， 使 用 Arial 系列 格式 ， 字 体 颜色 为 白色 ， 加 粗 显示 。 
相关 CSS 代码 片段 如 下 : 

/* 菜 单 区 域 设 置 */ 


nav 1{ 
width: 500px; 
text-align: center; 
font-size: 30px; 
font-weight: bold; 
font-family: Arial, Helvetica, sans-serif; 
color: white; 





} 


然后 在 <nav> 首 尾 标 签 之 间 添 加 具体 的 菜单 选项 ， 本 例 使 用 <div> 元 素 创建 。 
相关 HIMLS 代码 如 下 : 





<!-- 菜 单 栏目 --> 
<nav> 
<div>HTML5</div> 


<div>Css3</div> 

<div>Javascript</div> 

<div>jQuery</div> 
</nav> 


在 CSS 文件 中 为 <div> 标 签 设置 统一 样式 ， 具 体 样式 要 求 如 下 。 
。 边框 ，1 像素 宽 的 黑色 实 线 ; 
。 尺寸; 宽度 为 200 像素 ， 高 度 为 100 像素 ; 
。 行 高 : 行 高 为 100 像素 ， 与 元 素 的 高 度 一 致 ， 
。 浮动 : 向 左 浮动 ; 
。 边 距 ， 各 边 的 外 边 距 为 20 像素 。 
相关 CSS 代码 片段 如 下 : 
/* 菜 单 统一 样式 设置 */ 
div { 
border: lpx solid; 
width: 200px; 
height: 100px; 
line-height: 100px; 
float: left; 
margin: 20px; 
} 
为 了 更 明显 地 区 分 不 同 的 菜单 选项 ， 为 这 4 个 菜单 选项 分 别 添加 不 同 的 背景 颜色 。 
相关 CSS 代码 片段 如 下 : 


























/* 背 景 颜色 设置 */ 
Style0l { 
background-color: #66F; 第 
} 
.style02 { 9 
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background-color: #FF8000; 
} 
.style03 { 

background-color: #3CC; 
} 
-Style04 { 

background-color: #FF8080; 
} 


最 后 在 <nav> 首 尾 标 签 之 间 为 所 有 菜单 选项 添加 对 应 的 类 名 称 。 
相关 HIML5 代码 修改 后 如 下 : 
< 菜单 栏目 -> 


<nav> 
<div class="style01">HTML5</div> 








<div class="style02">CSS3</div> 
<div class="style03">Javascript</div> 
<div class="style04">jQuery</div> 





</nav> 

此 时 页 面 效果 如 图 9-6 所 示 。 回 -= 本 到 
二 es ee _ DD C55 的 af x 

由 图 9-6 可 见 ， 关 于 菜单 的 样式 要 求 已 初步 CQ C553 鱼 限 荣 单 效果 的 设计 与 实现 html 9 = 


实现 。 目 前 尚未 添加 鼠标 悬浮 时 的 菜单 效果 ， 因 wml oO 册 
此 当前 为 静态 的 菜单 样式 。 下 一 节 将 介绍 如 何 使 


用 自 定义 动画 实现 鼠标 悬浮 时 菜单 自动 放大 的 
效果 。 HTML5 CSS3 


9.2.2 ”动画 效果 的 实现 


果 ， 当 鼠标 悬浮 于 指定 的 菜单 选项 时 该 元 素 会 动 
态 放大 ， 直 到 鼠标 离开 时 恢复 原状 。 

首先 在 CSS 内 部 样式 表 中 使 用 @keyframes 图 9-6 ”响应 式 菜单 界面 设计 效果 
设置 动画 效果 ， 并 为 其 自 定义 动画 名 称 。 相 关 CSS 代码 如 下 : 








Qkeyframes myframe{ 
from { 
transform: scale(1.0, 1.0); 


} 
Le:f 

transform: scale(1.3, 1.3); 
} 


} 


上 述 代 码 表 示 在 动画 刚 开始 时 缩放 元 素 为 原本 的 大 小 ， 然 后 逐步 放大 元 素 的 宽 和 高 ， 
直到 动画 即将 结束 时 将 元 素 放 大 至 原来 的 1.3 倍 。 

然后 在 CSS 内 部 样式 表 中 为 <div> 元 素 设置 鼠标 悬浮 时 的 样式 变化 ， 相 关 CSS 代码 如 下 : 

div:hover { 


animation: myframe 0.5s forwards; 
} 











上 述 代码 表示 将 对 鼠标 悬浮 事件 使 用 @keyframes 中 定义 的 动画 myframe, 动画 的 持续 
时 间 为 0.5 秒 ， 并 且 当 动画 播放 结束 时 保持 最 后 一 帧 的 动画 状态 。 
运行 效果 如 图 9-7 所 示 。 
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图 9-7 ”鼠标 悬浮 时 菜单 的 放大 效果 














由 图 9-7 可 见 ， 当 鼠标 悬浮 在 不 同 的 菜单 选项 时 当前 选项 均 可 以 自动 放大 。 至 此 用 
CSS3 动画 制作 响应 式 放 大 菜单 的 功能 已 全 部 实现 。 


9.2.3 完整 代码 展示 


完整 的 HTML5 代码 如 下 : 

















于 <!DOCTYPE html> 

2 <html> 

3 <head> 

4. <meta charset="utf-8"> 

5. <title>CSS3 响 应 式 菜单 的 设计 与 实现 </title> 

6 <link rel="stylesheet" href="css/menu.css"> 
演 </head> 

8 <body> 

9. <!-- 标 题 --> 

LO <h3>CSS3 响 应 式 菜单 的 设计 与 实现 </h3> 

Ls <!-- 水 平 线 --> 

12: <hr /> 

Ws <!-- 菜 单 栏目 --> 

9 <nav> 

5s <div class="style01">HTML5</div> 

16. <div class="style02">CSS3</div> 

LE <div class="style03">Javascript</div> 

8: <div class="style04">jQuery</div> 

i195 </nav> 

20. </body> 

21. </html> 

完整 的 CSS3 代码 如 下 : 

1.， /* 自 定 又 动画 效果 */ 草 
之。 @keyframes myframe{ 9 
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from { 
transform: scale(1.0,1.0); 
































3 

4 

5. } 

6. to { 

7 transform: scale(1.3,1.3); 
8 

9 





和 


- 
10. /+* 菜 单 区 域 设 置 */ 
11. nav f{ 





2 width: 500px; 

13s text-align: center; 
14 font-size: 30px; 
15: font-weight: bold; 
16: font-family: Arial, Helvetica, sans-serif; 
3 color: white; 

20 直 

19. /* 菜 单 统一 样式 设置 */ 

20。 div { 

Ss border: lpx solid; 
225 width: 200px; 

i height: 100px; 

2 line-height: 100px; 
i flhoats lefts 

人 26 margin: 20px; 

-5 ,和 


28. /* 鼠 标 悬 浮 事件 设置 */ 

29. div:hover { 

30 . animation: myframe 0.5s forwards; 
31。 于 

32. /* 背 景 颜色 设置 */ 

33。 23EYle0L 《 


34. background-color: #66F; 
Lk ) 

6: .Style02 { 

:ET background-color: #FF8000; 
30s 于 

39。 .style03 1 

40. background-color: #3CC; 

Eb 站 

42. .style04 { 

43. background-color: #FF8080; 


44. J} 








第 10 章 综合 应 用 设计 实例 





本 章 主要 包含 了 两 个 综合 应 用 设计 实例 ， 一 是 基于 HTML5 的 贪 吃 蛇 游 戏 的 设计 与 实 
现 ， 二 是 企业 文化 用 品 展示 网 页 的 开发 。 其 中 ， 贪 吃 蛇 游戏 是 一 个 网 页 版 的 单机 游戏 ， 将 
使 用 画布 作为 页 面 主体 ， 企 业 文 化 用 品 展示 网 页 节选 自 一 个 实战 性 质 的 项 目 ， 根 据 客户 需 
求 开 发 网 页 首页 。 本 章 通过 对 完整 项 目 实例 的 解析 与 实现 提高 开发 者 的 项 目 分 析 能 力 以 及 
强化 对 于 HIML5、CSS3 与 JavaScript 的 综合 应 用 能 力 。 

本 章 学 习 目 标 : 

。 学 习 如 何 综合 应 用 HTML5、CSS3 与 JavaScript 开发 单机 游戏 ; 

。 学 习 如 何 综合 应 用 HTML5、CSS3 与 JavaScript 开发 Web 网 站 。 


10.1 基于 HTMLS 的 贪 吃 蛇 游戏 的 设计 与 实现 

















10.1.1 贪 吃 蛇 游戏 简介 


贪 吃 蛇 游戏 是 一 款 经 典 的 单机 休闲 游戏 ， 玩 家 通过 上 、 下 、 左 、 右 按键 控制 蛇 头 的 移 
动 方向 使 其 向 指定 的 方向 前 进 , 并 吃 掉 随 机 位 置 上 
产生 的 食物 来 获得 分 数 。 每 吃 掉 一 次 食物 , 贪 吃 蛇 eA 
的 蛇 身 都 会 变 长 , 并 且 会 继续 在 随机 位 置 上 产生 下 lss ial oss 
一 个 食物 。 如 果 蛇 头 撞 到 墙壁 或 蛇 身 , 则 判定 游戏 
失败 。 根 据 游戏 的 难度 可 以 设置 不 同 的 游戏 速度 ， 
蛇 的 聆 行 速度 越 快 ， 游 戏 的 难度 越 大 。 

该 项 目 将 综合 应 用 HTML5 、CSS3 与 
JavaScript 相关 技术 来 实现 。 对 于 开发 者 来 说 ， 除 
了 需要 设计 游戏 界面 布局 外 还 需要 设计 按键 的 监 
听 、 游 戏 速度 、 蛇 的 移动 效果 以 及 食物 的 处 理 。 其 
游戏 效果 如 图 10-1 所 示 。 


10.1.2 界面 布局 设计 图 10-1 贪 吃 蛇 游戏 效果 图 


本 节 主 要 介绍 游戏 界面 布局 的 设计 ， 由 两 个 部 分 组 成 ， 即 信息 展示 区 (包含 了 历史 最 
高 分 和 当前 分 数 ) 和 主 游戏 显示 区 域 。 

1. 整体 界面 设计 

首先 使 用 一 个 <div> 元 素 在 页 面 背景 上 创建 游戏 整体 界面 , 在 其 内 部 添加 标题 、 水 平 线 
并 预 留 信息 展示 区 和 主 游戏 显示 区 域 (游戏 画布 )。 相 关 HTMLS5 代码 片段 如 下 : 
































HTML5 克 页 户 纲 族 矿 实战 





<body> 
<div id="container"> 
<h3> 基 于 HTML5 的 贪 吃 蛇 小 游戏 </h3> 
<hr> 
<! 一 -状态 信息 栏 --> 
<!-- 设 置 游戏 画布 --> 





</div> 
</body> 
这 段 代 码 为 <div> 元 素 定义 了 id="container", 以 便 可 以 使 用 CSS 的 ID 选择 器 进行 样式 


设置 。 
本 例 使 用 CSS 外 部 样式 表 规 定 页 面 样式 。 在 本 地 css 文件 夹 中 创建 snake.css 文件 ， 并 
在 <head> 首 尾 标签 中 声明 对 CSS 文件 的 引用 。 相 关 HIMLS 代码 片段 如 下 : 

















<head> 

<meta charset="utf-8"> 

<tit1le> 贪 吃 蛇 游戏 的 设计 与 实现 </title> 

<link rel="stylesheet" href="css/snake.css"> 
</head> 





在 CSS 文件 中 使 用 ID 选择 器 为 id="container" 的 <div> 标 签 设置 样式 ， 具 体 样式 要 求 
如 下 。 
。 文本 : 居中 显示 ; 
。 尺寸 ; 宽度 为 600 像素 ; 
。 边 距 : 各 边 的 外 边 距 定义 为 auto， 以 便 可 以 居中 显示 ; 各 边 的 内 边 距 为 10 像素 ; 
。 颜色 : 背景 颜色 为 白色 ， 
。 特殊 : 使 用 了 CSS3 技术 为 其 定义 边框 阴影 效果 ， 在 其 右 下 角 有 灰色 投影 。 
相关 CSS 代码 片段 如 下 : 
/* 游 戏 主 界面 的 总 体 样式 */ 
#container { 
text-align: center; 
width: 600px; 
margin: auto; 
padding:10px; 
background-color:white; 
box-shadow: 1l0px 1l0px 1l5px gray; 








其 中 , box-shadow 属性 可 以 实现 边框 投影 效果 , 4 个 参数 分 别 代 表 水 平方 向 的 偏 移 (向 
右 偏 移 10 像素 )、 垂 直方 向 的 偏 移 〈 向 下 偏 移 10 像素 )、 阴 影 宽度 (15 像素 ) 和 阴影 颜色 
(灰色 )， 均 可 自 定义 成 其 他 值 。 
由 于 网 页 背景 颜色 默认 为 白色 ,与 <div> 元 素 设置 的 背景 颜色 相同 。 为 了 区 分 ,将 网 页 
的 背景 颜色 设置 为 银色 〈silver)。 
相关 CSS 代码 片段 如 下 : 




















此 时 页 面 效 果 如 图 10-2 所 示 。 
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图 10-2 游戏 整体 界面 样式 效果 图 


由 图 10-2 可 见 ， 关 于 游戏 整体 界面 的 样式 要 求 已 初步 实现 。 目 前 尚未 在 <div> 首 尾 标 
签 之 间 填 充 信息 展示 栏 与 游戏 画布 的 相关 内 容 ， 因 此 在 网 页 上 浏览 没有 完整 效果 ， 需 等 待 
后 续 补 充 。 接 下 来 将 介绍 如 何 添加 信息 展示 区 。 

2， 信 息 展 示 区 设计 

信息 展示 区 位 于 主 游戏 区 域 的 上 方 ， 在 游戏 主 界面 的 预 留 区 域 创建 一 个 id="status" 的 
<div> 元 素 表示 , 并 在 其 中 包含 了 两 个 <div> 元 素 分 别 用 于 显示 历史 最 高 分 与 当前 游戏 分 数 。 

相关 HIMLS 代码 片段 如 下 : 

<div id="container"> 

<h3> 基 于 HTML5 的 贪 吃 蛇 小 游戏 </h3> 
<hr> 

<!-- 状 态 信息 栏 --> 

<div id="status"> 


<!-- 历 史 最 高 分 --> 
<div class="box"> 
历史 最 高 分 : <span id="bestscore">0</span> 





</div> 
<!-- 当 前 分 数 --> 


<div class="box"> 


当前 分 数 ， <span id="currentScore">0</span> 
</div> 
</div> 
<!-- 设 置 游戏 画布 --> 
</div> 
为 显示 分 数 的 两 个 <div> 元 素 添 加 class="box"， 以 便 在 CSS 样式 表 中 为 其 设置 统一 样 
式 。 其 中 历史 最 高 分 与 当前 游戏 分 数 均 初始 化 为 0， 并 将 分 数 各 自 翌 套 在 <span> 容 器 中 。 
为 这 两 个 <span> 元 素 分 别 设置 id="bestScore" 和 id="currentScore"， 以 方便 后 面 使 用 jQuery 
语句 实时 更 新 信息 展示 区 中 的 分 数 。 
在 CSS 样式 表 中 使 用 ID 选择 器 为 信息 展示 区 状态 栏 ) 设置 整体 样式 。 
。 边 距 : 各 边 的 内 边 距 均 为 10 像素 ; 各 边 的 外 边 距 为 aato， 以 便 可 以 居中 显示 。 
。 尺寸; 宽度 为 400 像素 ， 高 度 为 20 像素 。 























相关 CSS 代码 片段 如 下 : 第 
/* 状 态 栏 样 式 */ 10 
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#status { 
padding: 10px; 


width: 400px; 
height: 20px; 
margin: auto; 








然后 使 用 类 选择 器 为 包含 class="box" 的 <div> 进 行 样式 设置 。 
。 浮动 : 向 左 浮动 ; 

。 尺寸 : 宽度 为 200 像素 。 

相关 CSS 代码 片段 如 下 : 

/* 状 态 栏 中 栏目 的 盒子 样式 */ 

.box { 


float: left; 
width: 200px; 














} 





目前 信息 展示 区 已 完成 ， 运 行 效果 如 图 10-3 所 示 。 
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历史 最 高 分 : 0 当前 分 数 : 0 





图 10-3 ”信息 展示 区 完成 效果 图 





由 图 10-3 可 见 , 信息 展示 区 样式 已 完成 。 接 下 来 将 介绍 如 何 添加 主 游戏 界面 区 域内 容 。 
3， 主 游戏 界面 设计 
主 游戏 界面 区 域 包含 两 个 部 分 ， 即 游戏 画面 与 “重新 开始 ”按钮 。 本 项 目的 游戏 画面 
是 基于 HIMLS 画布 API 实现 的 ， 所 有 的 游戏 内 容 将 在 <canvas> 元 素 内 部 呈现 。 
相关 HIMLS 代码 片段 如 下 : 


<div id="container"> 
<h3> 基 于 HTML5 的 贪 吃 蛇 小 游戏 </h3> 





<hr> 
<! 一 -状态 信息 栏 --> 
… 《代码 略 ) 
<! 一 -设置 游戏 画布 --> 
<canvas id="myCanvas" width="400" height="400" style="border:1px solid"> 
</canvas> 
</div> 





为 画布 标签 <canvas> 设 置 id="myCanvas"， 以 便 后 续 使 用 JavaScript 进行 绘制 工作 。 设 
置 <canvas> 元 素 的 宽度 和 高 度 均 为 400 像素 ， 并 使 用 行内 样式 表 设 置 该 画布 带 有 1 像素 宽 


最 后 使 用 <button> 标 签 制作 “重新 开始 ”按钮 。 相 关 HIMLS 代码 片段 如 下 : 

















<body> 


<div id="container"> 
<!-- 页 面 标题 --> 
<h3> 基 于 HTML5 的 贪 吃 蛇 小 游戏 </h3> 
<!-- 水 平 线 --> 
<hr /> 
<!-- 游 戏 时 间 〈 代 码 略 ) --> 
<!-- 游 戏 画 布 〈 代 码 略 ) --> 
<!- -游戏 按钮 --> 
<div> 

<button> 重 新 开始 </button> 

</div> 





前 该 按钮 仅 用 于 布局 设计 ， 单 击 后 暂 无 响应 事件 。 后 续 会 在 JavaScript 中 为 其 增加 


相 


CSS 文件 中 为 按钮 标签 <button> 进 行 样式 设置 。 

尺寸 ; 宽度 为 200 像素 、 高 度 为 50 像素 ; 

边 距 : 上 、 下 外 边 距 为 10 像素 ， 左 、 右 外 边 距 为 0 像素; 
边框 : 无 边框 效果 ; 

字体 : 字体 大 小 为 25 像素 ， 加 粗 显 示 ; 

颜色 : 字体 颜色 为 白色 ， 背 景 颜色 为 浅 珊瑚 红色 〈lightcoral)。 
关 CSS 代码 片段 如 下 : 








/* 


设置 游戏 按钮 样式 */ 


button { 


} 


width: 200px; 

height: 50px; 

margin: 1l0px 0; 

border: 0; 

outline: none; 

font-size: 25px; 

font-weight: bold; 

color: white; 
background-color: lightcoral; 





用 


户 还 可 以 为 <button> 标 签 设 置 鼠 标 悬 浮 时 的 样式 效果 ， 在 CSS 样式 表 中 用 button: 


hover 表示 。 本 例 将 该 效果 设置 为 按钮 背景 颜色 的 改变 , 换 成 颜色 加 深 的 珊瑚 红色 (coral)。 





相关 CSS 代码 片段 如 下 : 


/7 设置 鼠标 晤 浮 时 的 按 饥 样 式 */ 


button:hover { 


} 


background-color: coral; 





此 时 整个 样式 设计 就 全 部 完成 了 ， 其 页 面 效 果 如 图 10-4 所 示 。 
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历史 最 高 分 : 0 当前 分 数 : 0 

















图 10-4 ”信息 展示 区 完成 效果 图 


由 图 10-4 可 见 ， 关 于 贪 吃 蛇 游戏 的 布局 和 样式 要 求 已 初步 实现 。 目 前 尚未 实现 游戏 退 
辑 ， 该 内 容 将 在 下 一 节 介绍 。 


10.1.3 数据 模型 设计 


本 项 目 将 游戏 画布 分 割 成 40 行 、40 列 ， 即 分 割 成 长 宽 均 为 10 像素 的 1600 个 网 格 。 
在 画布 上 的 蛇 身 就 是 由 一 系列 连续 的 网 格 填 充 颜 色 组 成 的 ， 而 食物 是 由 单个 网 格 填充 颜色 
而 成 的 ， 因 此 只 要 知道 了 这 些 需 要 填 色 的 网 格 坐 标 即 可 在 画布 上 绘制 出 蛇 身 与 食物 。 

1. 创建 贪 吃 蛇 模型 

本 项 目 设置 贪 吃 蛇 的 初始 身长 为 3 格 ， 以 贪 吃 蛇 的 蛇 头 出 现在 最 左 侧 第 2 行 并 且 向 右 
移动 为 例 ， 动 态 过 程 如 图 10-5 所 示 。 







































































(a) 贪 吃 蛇 的 初始 位 置 (b) 蛇 向 右 伸展 的 过 程 (c) 展现 完成 蛇 身 
10-5 ” 贪 吃 蛇 的 模型 概念 图 


10-5 中 标记 的 所 有 坐标 数据 对 应 的 都 是 网 格 的 左上 角 坐 标 位 置 。 由 图 10-5(a) 可 见 ， 


本 例 中 的 贪 吃 蛇 的 初始 位 置 出 现在 坐标 (0,10) 处 ， 使 用 浅 蓝 色 填 充 、 边 长 为 10 像素 的 网 格 
来 表示 蛇 身 。 由 于 目前 规定 为 向 右 移动 ， 因 此 随 着 每 次 游戏 内 容 刷新 都 追加 填充 右 侧 一 个 























空白 网 格 作为 蛇 身 ， 直 到 完整 蛇 身 在 网 格 中 全 部 显现 ， 这 一 过 程 由 图 10-5(b) 和 图 10-5(c) 
所 呈现 。 

可 以 使 用 一 个 数组 来 记录 组 成 蛇 身 的 每 一 个 网 格 坐标 ， 并 依次 在 画布 的 指定 位 置 填充 
颜色 ， 这 样 即 可 形成 贪 吃 蛇 从 出 现 到 移动 直到 展现 完整 身体 的 过 程 。 

例如 上 面 示例 中 向 右 移动 的 贪 吃 蛇 的 初始 状态 的 坐标 可 以 记录 为 : 





Var snakeMal 


随 着 蛇 头 向 右前 进 ， 该 数组 增加 第 2 组 坐标 : 


SnakeMap = [{"'x":0, "'y':10}, {'x":10, 


如 果 继 续 向 右前 进 ， 该 数组 增加 第 3 组 坐标 : 








snakeMap .Ad 1 WE a ,A 


此 时 蛇 身 己 经 完整 显示 出 来 。 

2. 蛇 身 移动 模型 

当 蛇 身 己 经 完全 显示 在 游戏 面 面 中 时 , 如 果 蛇 继续 前 进 , 则 需要 清除 蛇 尾 的 网 格 颜色 ， 
以 表现 出 蛇 的 移动 效果 。 以 上 一 节 的 贪 吃 蛇 模型 为 例 ， 分 别 展 示 其 向 右 、 向 下 和 向 上 移动 
的 效果 ， 如 图 10-6 所 示 。 


















































(a) 贪 吃 蛇 的 初始 状态 模型 (b) 蛇 向 右 移动 的 效果 





















































(c) 蛇 向 下 移动 的 效果 (d) 蛇 向 上 移动 的 效果 第 
图 10-6 贪 吃 蛇 的 移动 模型 图 10 
章 


如 会 磋 用友 矿 笑 例 


HTML5 网 页 拭 绞 雁 矿 守 战 


图 10-6(b) 显 示 的 是 贪 吃 蛇 的 蛇 身 已 全 部 显示 出 来 后 仍 继续 向 右前 进 的 效果 。 在 吃 到 食 
物 之 前 ， 蛇 的 身长 将 保持 不 变 。 此 时 除了 需要 填充 右 侧 一 个 新 的 空白 网 格外 ， 还 需要 清除 
最 早 的 一 个 蛇 身 网 格 颜色 ， 以 实现 蛇 在 移动 的 动画 效果 。 图 10-6(c) 与 图 10-6(d) 显 示 的 是 贪 
吃 蛇 分 别 向 下 和 向 上 移动 的 效果 ， 其 原理 与 图 10-6(b) 的 解释 相同 。 

以 上 面 介绍 的 数组 snakeMap 为 例 继续 讲解 如 何 实现 蛇 的 移动 效果 。 

例如 继续 往 右前 进 ， 该 数组 添加 新 坐标 ， 还 需要 删除 最 早 的 一 组 坐标 : 


[ snakeMap = [{'zx"':10, ‘y':10}, {'x':20, ‘y':10}, {'x":30, 'y':10}]; ] 


因为 该 数组 中 的 坐标 只 用 于 显示 当前 的 蛇 身 数据 ， 因 此 需要 去 掉 曾 经 路 过 的 轨迹 。 这 
种 绘制 方式 可 以 展现 贪 吃 蛇 的 动态 移动 效果 。 

故 只 要 每 次 在 游戏 界面 刷新 时 保持 更 新 snakeMap 数组 的 记录 即 可 获得 贪 吃 蛇 的 当前 
位 置 。 

3. 蛇 吃 食物 模型 

在 贪 吃 蛇 的 移动 过 程 中 ， 如 果 蛇 头 碰 撞 到 食物 则 认为 蛇 将 食物 吃 掉 了 。 此 时 蛇 的 身长 
增加 一 格 ， 并 且 食 物 消失 然后 在 随机 位 置 重新 出 现 。 同样 以 初始 位 置 在 (0,10) 坐 标 、 身 长 为 
3 格 的 蛇 模 型 为 例 ， 展 示 蛇 吃食 物 的 过 程 如 图 10-7 所 示 。 
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(a) 贪 吃 蛇 的 初始 位 置 (b) 蛇 向 下 移动 准备 吃食 (c) 吞食 后 的 贪 吃 蛇 
图 10-7 蛇 吃 食物 的 模型 概念 图 









































由 图 10-7(a) 可 见 ， 食 物 位 于 蛇 头 的 正 下 方 ， 因 此 需要 控制 蛇 头 向 下 移动 来 接近 食物 。 
图 10-7(b) 显 示 的 是 蛇 向 下 移动 一 格 后 的 效果 ， 此 时 蛇 头 已 经 贴 在 食物 边 上 了 。 图 10-7(c) 
显示 的 是 食物 被 吞食 后 的 效果 ， 此 时 贪 吃 蛇 的 蛇 身 长 度 增 加 了 一 格 并 且 食 物 消 失 。 

因此 每 当 蛇 吃 到 食物 时 需要 将 表示 蛇 身 的 变量 t 自 增 1， 然 后 判断 用 于 记录 蛇 身 坐标 
的 数组 snakeMap 的 长 度 ， 如 果 与 当前 蛇 身 长 度 t 的 值 相同 ， 则 不 必 删 除 最 前 面 的 数据 。 

比 时 的 snakeMap 数组 坐标 为 : 


ahakeMap = [1 2 0 “YS108 {R20 "Yt:10F ("e200 "YI20F {4"¥"220. 
'y':30}1]; 











10.1.4 ”游戏 的 浸 辑 实现 


1. 游戏 准备 
首先 使 用 一 系列 变量 设置 贪 吃 蛇 的 初始 状态 ， 包 括 蛇 身长 度 、 首 次 出 现 的 位 置 和 移动 





方向 等 。 相 关 JavaScript 代码 如 下 : 





记录 蛇 的 运行 轨 这 ， 用 数组 记录 每 一 个 坐标 点 


Var snakeMap = []; 

// 蛇 身 单元 大 小 

Var w= 10; 

// 方 向 代码 : 左 37， 上 38， 右 39， 下 40 
var direction = 39; 

// 蛇 的 初始 坐标 

Var ¥ = 0 

var y= 0; 

// 画 布 的 宽 和 高 

var width = 400; 

var height = 400; 

// 根 据 id 找 到 指定 的 画布 

var c = document .getElementById ("myCanvas"); 
// 创 建 2D 的 context 对 象 


Var ctx = c.getContext ("2d"); 


上 述 代 码 设置 了 贪 吃 蛇 的 初始 状态 为 身长 3 格 ， 初 始 出 现 位 置 为 (0.0) 点 ， 并 且 向 右 移 
动 。 其 中 用 于 记录 移动 方向 的 变量 direction 可 以 根据 实际 需要 自 定 义 方 向 对 应 的 数字 ， 这 
里 为 了 方便 按键 监听 效果 ， 选 择 了 相应 的 按键 code 表示 方向 。 

这 里 声明 了 蛇 身 单元 格 的 边 长 (w) 以 及 画布 的 宽 〈width) 和 高 height) 是 为 了 方便 
开发 者 的 后 续 修改 ， 如 果 想 改变 游戏 界面 或 者 贪 吃 蛇 的 大 小 只 需要 更 改 对 应 的 这 一 处 变量 
值 ， 无 须 修改 其 他 逻辑 代码 。 最 后 声明 的 ctx 对 象 是 为 了 后 续 用 于 游戏 画布 的 绘制 工作 。 

由 于 当前 蛇 的 初始 位 置 与 方向 为 固定 值 ， 这 样 会 降低 游戏 难度 与 可 玩 度 ， 因 此 在 游戏 
启动 方法 GameStart0) 中 可 以 使 用 随机 数 重新 定义 蛇 初 始 出 现 的 位 置 和 移动 方向 ,， 以 便 每 次 
刷新 页 面 都 可 以 获得 不 同 的 游戏 效果 。 

JavaScript 中 GameStart () 方 法 的 初始 代码 如 下 : 











function GameStart () { 
// 随 机 生成 贪 吃 蛇 的 蛇 头 坐标 
x = Math.floor (Math.random() * Width / W)  W7 
y = Math.floor (Math.random() * height / w) * w; 


// 随 机 生成 蛇 的 前 进 方向 
direction = 37 + Math.floor(Math.random() * 4); 
} 


首先 需要 为 贪 吃 蛇 随 机 产生 一 个 初始 位 置 坐标 (xy)， 并 且 其 中 x 和 ?了 的 值 必 须 是 游戏 
画布 中 任意 网 格 的 左上 角 点 ， 这 样 才能 保证 蛇 身 的 位 置 不 发 生 偏 移 。 
由 于 游戏 画布 的 长 和 宽 均 为 400 像素 ， 因 此 画布 中 任意 网 格 的 坐标 规律 为 : 


[ (row*10, col*10) | 
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HTML5 网 页 诫 绞 雁 矿 完 战 


其 中 ，row 指 的 是 当前 网 格 的 行 数 ，col 指 的 是 列 数 。 需 要 注意 的 是 ， 这 里 的 行 数 与 列 
数 均 为 从 0 开始 计数 .例如 游戏 画布 中 第 2 行 、 第 3 列 的 网 格 坐标 为 2*10.3*10), 即 (20, 30)。 
因此 只 需要 随机 产生 0 一 39 的 行 数 和 列 数 即 可 乘 以 网 格 边 长 换算 出 坐标 位 置 。 

在 JavaScript 中 ，Math random0 可 以 产生 一 个 [0.D) 区 间 的 随机 数 ， 因 此 在 这 里 使 有 
Math.random()*width/w 表示 用 随机 数 乘 以 画布 的 宽度 再 除 以 网 格 边 长 ， 可 获得 一 个 [0.40) 
区 间 的 随机 数 。 由 于 本 项 目 中 的 画布 宽 与 高 相等 ， 因 此 Math.random() * heightw 同样 可 以 
产生 一 个 [0,40) 区 间 的 随机 数 。 使 用 Math.floor0 函 数 是 为 了 去 掉 小 数 点 后 面 的 数字 ， 这 样 
才能 确保 最 后 的 随机 数 为 指定 范围 内 的 整数 。 最 后 再 乘 以 网 格 边 长 w 即 可 符合 画布 中 任意 
网 格 的 坐标 规律 。 

而 表示 蛇 前 进 方向 的 变量 direction 为 了 和 键盘 上 的 方向 键 对 应 的 代码 保持 一 致 ， 只 能 
是 [37,40] 区 间 的 一 个 数字 。 因 此 同样 先 使 用 Math.random() * 4 来 获取 [0.4) 区 间 的 数字 ， 然 
后 用 Math.floor0 函 数 去 掉 小 数 点 后 面 的 内 容 变 成 整数 ， 最 后 加 上 37 即 可 获得 [37,41) 区 间 
的 整数 ， 由 于 该 随机 数 不 包 括 上 限 ， 也 就 是 [37,40] 区 间 的 整数 。 

此 时 游戏 的 初始 化 工作 基本 完成 ， 接 下 来 将 介绍 如 何 动 态 地 绘制 蛇 身 的 移动 过 程 。 

2. 绘制 蛇 身 

每 次 游戏 面 面 刷 新 ， 蛇 只 需要 往 指 定 方向 前 进 一 格 。 如 果 没 有 吃 到 新 的 食物 ， 则 还 需 
要 清除 原先 蛇 尾 最 后 一 个 位 置 的 颜色 ， 以 表现 出 贪 吃 蛇 动态 地 前 进 了 一 格 的 效果 。 

在 JavaScript 中 声明 drawSnake() 方 法 专门 用 于 绘制 贪 吃 蛇 。 
























































function drawSnake () { 
// 设 置 蛇 身 内 部 的 填充 颜色 
ctx.fillstyle = "lightblue"; 
// 绘 制 最 新 位 置 的 蛇 身 算 形 
ctx.fillRect (x, y, w, w); 


// 数 组 只 保留 蛇 身 长 度 的 数据 ， 如 果 蛇 前 进 了 ， 则 删除 最 旧 的 坐标 数据 
if (snakeMap.length > t) { 

// 删 除数 组 的 第 一 项 ， 即 蛇 的 尾部 最 后 一 个 位 置 的 坐标 记录 

Var lastBox = snakeMap.shift(); 

// 清 除 蛇 的 尾部 的 最 后 一 个 位 置 ， 从 而 实现 移动 效果 


ctx.clearRect (lastBox['x'], lastBox['y'], Ww, w); 








由 于 要 通过 游戏 画面 刷新 才能 实现 动画 效果 ， 因 此 在 JavaScript 中 声明 gameRefresh() 
方法 专门 用 于 刷新 画布 ， 并 在 该 方法 中 调用 drawSnake() 方 法 绘制 贪 吃 蛇 的 蛇 身 变 化 过 程 。 
JavaScript 中 gameRefresh() 方 法 的 初始 代码 如 下 : 
i 








function gameRefresh() { 
// 将 当前 坐标 数据 添加 到 贪 吃 蛇 的 运动 轨迹 坐标 数组 中 
SnakeMap .push({ 
时 
ce 





]) 7 


/7 绘制 贪 吃 蛇 
drawsnake () 7 


// 根 据 方 向 移动 蛇 头 的 下 一 个 位 置 
Switch (direction) { 
XY 在 37 
case 37: 
X -= WwW; 
break; 
// 上 38 


case 38: 
Y -= ws; 
break; 





最 后 在 GameStart0 函 数 中 设置 在 间隔 规定 的 时 间 后 重复 调用 gameRefreshO 已 达到 游 
戏 画 面 刷新 的 效果 。 修 改 后 的 GameStart0 函 数 如 下 : 





function GameSstart() { 
// 随 机 生成 贪 吃 蛇 的 蛇 头 坐标 
… 《代码 略 》 


// 随 机 生成 蛇 的 前 进 方向 
… (代码 略 ) 
// 每 隔 time 毫 秒 刷新 一 次 游戏 内 容 


setInterval ("gameRefresh()", 200); 
} 


其 中 200 指 的 是 游戏 画面 每 隔 200 毫秒 〈 即 0.2 秒 ) 刷新 一 次 ， 该 数值 可 自 定义 。 为 
方便 开发 者 后 续 修改 ， 也 可 以 将 这 里 的 200 改 为 变量 time， 并 在 游戏 初始 化 的 参数 中 对 变 
量 time 进行 初始 化 声明 。 

相关 JavaScript 代码 如 下 : 











// 游 戏 界面 刷新 的 间隔 时 间 (数字 越 大 ， 蛇 的 速度 越 慢 ) 


var time = 200; 


… 《后 续 代 码 略 ) 
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(a) 贫 吃 蛇 的 初始 位 置 (b) 贪 吃 蛇 向 右前 进 (c) 贪 吃 蛇 完全 出 现 
图 10-8 贪 吃 蛇 的 蛇 身 绘制 


图 10-8 中 是 当前 代码 的 运行 效果 , 贪 吃 蛇 在 随机 位 置 出 现 后 以 随机 方向 (本 次 为 向 右 ) 
开始 前 进 ， 直 到 整个 蛇 身 出 现 并 继续 前 进 。 由 于 此 时 尚未 获取 用 户 的 按键 指令 ， 因 此 目前 
贪 吃 蛇 只 能 按照 初始 方向 一 直 前 进 。 

3. 处理 蛇 头 的 移动 

贪 吃 蛇 是 依靠 玩家 按 下 键盘 上 的 方向 键 进 行 上 、 下 、 左 、 右 方向 切换 的 ， 因 此 首先 在 
JavaScript 中 使 用 document 对 象 的 onkeydown 方法 监听 并 获取 用 户 按键 。 

JavaScript 中 按键 监听 的 完整 代码 如 下 : 


document .onkeydown = function(e) { 


// 根 据 按键 更 新 前 进 方向 code: 左 37， 上 38， 右 39， 下 40 
if(e.keycode==3711e.keycode==3811e.keycode==3911e.keyCcode==40) 
direction = e.keyCode; 





由 于 只 需要 监听 键盘 上 的 方向 键 ， 并 且 这 些 方向 键 顺 时 针 旋转 左 、 上 、 右 、 下 对 应 的 
数字 代码 是 37 一 40， 因 此 只 考虑 这 4 种 情况 ， 并 且 直 接 将 按键 的 代码 赋值 给 表示 方向 的 变 
量 direction， 以 便 后 续 判 断 。 加 上 按键 监听 后 的 运行 效果 如 图 10-9 所 示 。 


基于 HTWL5 的 全 吃 蛇 小 游戏 





基于 ITML5 的 南 吃 蛇 小 游戏 


历史 最 两 分 。 0 前 分数 :人 





























(a) 贪 吃 蛇 正 在 前 进 (b) 贪 吃 蛇 改 变 方向 
图 10-9 贪 吃 蛇 的 方向 改变 


4. 绘制 随机 位 置 的 食物 

接 下 来 需要 在 页 面 上 为 贪 吃 蛇 绘制 食物 。 食 物 每 次 将 在 随机 网 格 位 置 出 现 ， 占 一 格 位 
置 。 食 物 每 次 只 在 画面 中 呈现 一 个 ， 直 到 被 蛇 头 触 碰 表 示 吃 掉 才 可 在 原先 的 位 置 清除 并 在 
下 一 个 随机 位 置 重新 产生 。 

在 JavaScript 中 声明 drawFood() 方 法 用 于 在 游戏 画布 的 随机 位 置 绘 制 食物 ， 代 码 如 下 : 











function drawFood() { 
// 随 机 生成 食物 坐标 
foodx = Math.floor (Math.random() * width / w) * w; 
foodY = Math.floor (Math.random() * height / w) * w; 
// 内 部 填充 颜色 
ctx.fillstyle = "#FF0000"; 
// 绘 制 矩形 
ctx.fillRect (foodx, foodY, w, w); 





这 里 随机 产生 的 食物 坐标 Ce) 与 贪 吃 蛇 的 初始 位 置 坐 标 要 求 一 样 ， 必 须 是 游戏 画布 中 
任意 网 格 的 左上 角 点 ， 因 此 同样 使 用 了 Math.random() 获 取 随 机 数 来 制作 。 由 于 代码 完全 相 
同 ， 这 里 不 再 袭 述 ， 读 者 可 以 查看 上 面 绘制 蛇 身 时 的 解释 。 然 后 设置 食物 为 红色 ， 并 使 用 
名 IRectO 函 数 进行 颜色 的 填充 。 

修改 JavaScript 中 的 GameStart() 方 法 ， 在 绘制 贪 吃 蛇 之 前 添加 drawFood0) 函 数 来 绘制 
食物 。 修 改 后 的 相关 代码 如 下 : 





function GameStart() { 


// 调 用 drawFood () 函数 ， 在 随机 位 置 绘制 第 一 个 食物 
drawFood(); 


// 随 机 生成 贪 吃 蛇 的 蛇 头 坐标 
… 《代码 略 ) 


// 随 机 生成 蛇 的 前 进 方向 
… 《代码 略 》 


// 每 隔 time 毫 秒 刷 新 一 次 游戏 内 容 
… 《代码 略 ) 
} 


添加 食物 绘制 后 的 运行 效果 如 图 10-10 所 示 。 

此 时 还 不 能 完成 吃食 物 的 动作 ， 将 在 下 面 介绍 相关 内 容 。 

5. 乃 到 食物 的 判定 

当 蛇 头 与 食物 出 现在 同一 格 中 时 判定 蛇 吃 到 了 食物 ， 此 时 食物 消失 、 当 前 分 数 增加 10 
分 、 蛇 身 增加 一 格 ， 并 且 重 新 在 随机 位 置 生成 下 一 个 食物 。 

在 JavaScript 中 修改 后 的 gameRefresh() 方 法 如 下 : 
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function gameRefresh() { 
// 将 当前 坐标 数据 添加 到 贪 吃 蛇 的 运动 轨迹 坐标 数组 中 
… 《代码 略 ) 
// 绘 制 贪 吃 蛇 
… (代码 略 ) 


// 根 据 方向 移动 蛇 头 的 下 一 个 位 置 
… 《代码 略 ) 


// 碰 撞 检 测 ， 返 回 值 0 表示 没有 撞 到 障 但 物 
… 《代码 略 ) 


// 吃 到 食物 的 判定 
if (foodX == x && foodY == y) { 
// 吃 到 一 次 食物 加 10 分 
Score += 10; 
// 更 新 状态 栏 中 的 当前 分 数 
Var currentSscore = document .getElementById("currentSscore"); 
currentscore.innerHTML = score; 
// 在 随机 位 置 绘制 下 一 个 食物 
drawFood(); 


// 蛇 身 的 长 度 加 1 


Se 





这 里 使 用 了 document.getElementById() 方 法 找到 状态 栏 中 用 于 显示 当前 分 数 的 元 素 对 
象 ， 并 将 其 内 容 更 新 为 最 新 的 分 值 。 

















运行 效果 如 图 10-11 所 示 。 









基于 HTML5 的 领 吃 蛇 小 游戏 基于 HTML5 的 贫 吃 蛇 小 游戏 


历史 最 商 分 。 0 当前 分 数 : 0 历史 最 高 分 : 0 当前 分 数 ; 10 


























(a) 贪 吃 蛇 向 食物 前 进 (b) 贪 吃 蛇 吃 到 第 一 个 食物 


图 10-11 贪 吃 蛇 吃 食物 的 过 程 


其 中 ， 图 10-11(a) 是 尚未 吃 过 食物 的 贪 吃 蛇 向 食物 前 进 的 画面 ， 此 时 蛇 身 长 度 为 3 个 
网 格 ， 当 前 分 数 为 0 分 ; 图 10-11(b) 是 贪 吃 蛇 已 经 吃 到 第 一 个 食物 的 画面 ， 此 时 蛇 身 长 度 
增加 为 4 个 网 格 ， 并 且 当 前 分 数 更 新 为 10 分 。 

6. 碰撞 检测 

如 果 蛇 头 撞 到 了 游戏 画布 的 任意 一 边 或 者 蛇 自 己 的 身体 均 判 定 为 游戏 失败 ， 此 时 弹出 
提示 对 话 框 告知 玩家 游戏 失败 的 原因 ， 并 显示 当前 总 分 。 如 果 本 局 得 分 打破 了 历史 纪录 ， 
则 使 用 HTML5 Web 存储 API 中 的 localStorage 对 象 更 新 存储 的 数据 。 玩 家 单 击 对 话 框 上 的 
“确定 ”按钮 则 可 以 开始 下 一 局 游戏 。 

在 JavaScript 中 首先 创建 detectCollision0 函 数 用 于 进行 蛇 与 障碍 物 的 碰撞 检测 。 碰 撞 
检测 需要 检测 两 种 可 能 性 ， 一 是 蛇 头 撞 到 了 四 周 的 墙壁 ， 二 是 蛇 头 撞 到 了 蛇 身 。 无 论 哪 一 
种 情况 发 生 都 判定 为 游戏 失败 。 

detectCollision() 方 法 的 完整 代码 如 下 : 





7 


// 碰 撞 检 测 函 数 


/= 二 一 == 二 二 二 


function detectCollision() { 
// 蛇 头 碰撞 到 了 四 周 的 墙壁 ， 游 戏 失败 
if (x > width || y > height || x<0 ||ly<0){ 
return 1; 


} 
// 蛇 头 碰撞 到 了 蛇 身 ， 游 戏 失败 
for (var i = 0; i < snakeMap.length; i++) { 
if (snakeMap[i] .x == x && snakeMap[i].y == y) { 
return 2; 
} 
} 
return 0; 





综合 三 用友 矿 笑 例 


HTML5 克 页 户 纲 族 矿 实战 


该 函数 具有 3 种 返回 值 ， 分 别 表示 不 同 的 含义 。 

。 返回 值 为 0: 表示 本 次 没有 碰撞 到 障碍 物 ， 游 戏 继续 ; 

。 返回 值 为 1: 表示 蛇 头 碰撞 到 了 游戏 画布 任意 一 边 的 墙壁 ， 游 戏 失败 ; 

。 返回 值 为 2: 表示 蛇 头 碰撞 到 了 蛇 身 ， 游 戏 失败 。 

在 JavaScript 中 修改 gameRefresh( 方 法 ， 在 根据 方向 移动 蛇 头 位 置 的 switch 语句 后 面 
添加 游戏 失败 判定 的 相关 代码 ， 通 过 判断 detectCollision0 函 数 的 返回 值 确定 当前 的 游戏 状 
态 。 修 改 后 的 gameRefresh() 方 法 如 下 : 














function gameRefresh() { 
// 将 当前 坐标 数据 添加 到 贪 吃 蛇 的 运动 轨迹 坐标 数组 中 
… 《代码 略 ) 


/7 绘制 贪 吃 蛇 
… (代码 略 ) 


// 根 据 方向 移动 蛇 头 的 下 一 个 位 置 
… 《代码 略 ) 


// 碰 撞 检测 ， 返 回 值 0 表示 没有 撞 到 障碍 物 
Var code = detectCollision(); 
// 如 果 返 回 值 不 为 0， 表 示 游 戏 失败 
if (code != 0) { 
// 如 果 当 前 得 分 高 于 历史 最 高 分 ， 则 更 新 历史 最 高 分 纪录 
if (score > bestScore) 
localStorage.setItem("bestScore", score); 
// 返 回 值 1 表 示 撞 到 墙壁 
if (code == 1) { 
alert (" 撞 到 了 墙壁 ， 游 戏 失败 ! 当 前 得 分 ， " + score); 


} 
// 返 回 值 2 表示 撞 到 蛇 身 
else if (code == 2) { 


alert (" 撞 到 了 蛇 身 ,游戏 失败 ! 当前 得 分 : " + score); 
} 
// 重 新 加 载 页 面 


window.1location.reload(); 
} 


加 上 碰撞 检测 后 的 游戏 运行 效果 如 图 10-12 所 示 。 

最 后 还 需要 将 最 高 分 纪录 在 游戏 重新 开始 后 显示 出 来 ， 该 内 容 将 在 下 面 介绍 。 

7. 显示 历史 最 高 分 

这 里 将 介绍 如 何在 状态 栏 中 显示 历史 最 高 分 纪录 。 本 项 目 使 用 HTML5 Web 存储 API 
中 的 localStorage 进行 历史 最 高 分 记录 的 读 取 。 在 JavaScript 中 声明 showBestScore() 方 法 用 
于 获取 并 在 状态 栏 中 展示 历史 最 高 分 。 

JavaScript 中 showBestScore() 方 法 的 完整 代码 如 下 : 











基于 HTML5 的 襄 吃 蛇 小 游戏 


历史 最 高 分 。10 当前 分 数 : 0 





未 
Ts 0 














重新 开始 





(b) 贪 吃 蛇 碰撞 到 蛇 身 


图 10-12 信 吃 蛇 的 碰撞 检测 


function showBestscore() { 
// 从 本 地 存储 数据 中 读 取 历 史 最 高 分 
bestScore = localStorage.getItem("bestScore"); 
// 如 果 尚 未 记录 最 高 分 ， 则 重 置 为 0 
if (bestScore == null) 
bestscore = 0; 
// 将 历史 最 高 分 更 新 到 状态 栏 中 
Var best = document .getElementById("bestScore"); 
best.innerHTML = bestSscore; 





首先 从 localStorage 中 根据 键 名 称 bestScore 查找 历史 最 高 分 纪录 ， 如 果 为 空 值 则 表示 
尚未 存储 最 高 分 ， 因 此 将 空 值 重 置 为 0， 最 后 将 获取 到 的 最 高 分 更 新 到 信息 展示 栏 中 。 相 
关 代码 修改 后 如 下 : 





// 获 得 历史 最 高 分 纪录 


showBestScore () : 


// 开 始 游戏 
GameStart () 7 
Di; 
运行 效果 如 图 10-13 所 示 。 
图 10-13 中 显示 的 是 历史 最 高 分 为 60 分 的 情况 , 当 本 次 游戏 分 数 超过 历史 最 高 分 时 该 
数字 将 会 被 更 新 。 
8. 游戏 重新 开始 
玩家 重新 开始 游戏 有 两 种 方式 ， 一 是 当 蛇 碰撞 到 墙壁 或 者 自身 导致 游戏 失败 时 会 自动 








钳 兮 习 用 区 矿 颁 侈 


HTML5 网 页 玉带 克 计 侨 紫 


重新 开始 游戏 ， 二 是 单 击 “ 重 新 开始 ”按钮 强制 重新 开始 游戏 。 





基于 HTML5 的 贪 吃 蛇 小 游戏 


而 史 最 高 分 :60 当前 分 数 :0 

















重新 开始 


图 10-13 信 吃 蛇 吃 食物 的 过 程 


重新 加 载 游戏 可 以 直接 使 用 window.location.reload0) 方 法 ， 已 达到 刷新 页 面 的 作用 。 
为 “重新 开始 ”按钮 添加 按键 监听 ， 修 改 后 的 代码 如 下 : 


<button onclick="window.location.reload()"> 重 新 开始 </button> 
在 游戏 刷新 函数 gameRefresh() 中 找到 碰撞 检测 的 相关 代码 , 在 判断 碰撞 到 物体 时 同样 


添加 window.location.reload0 方 法 以 达到 游戏 刷新 的 效果 。 
gameRefresh() 方 法 修改 后 的 代码 如 下 : 











= 
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function gameRefresh() { 
// 将 当前 坐标 数据 添加 到 贪 吃 蛇 的 运动 轨迹 坐标 数组 中 
… 《代码 略 ) 


// 绘 制 贪 吃 蛇 
… 《代码 略 ) 


// 根 据 方向 移动 蛇 头 的 下 一 个 位 置 
… 《代码 略 ) 


/7 碰撞 检测 ， 返 回 值 0 表示 没有 撞 到 障碍 物 
Var code = detectCollision(); 
// 如 果 返 回 值 不 为 0， 表 示 游 戏 失败 
if (code != 0) { 

… 《代码 略 ) 


// 重 新 加 载 页面 


window.location.reload(); 
} 


此 时 所 有 的 代码 内 容 全 部 完成 了 。 





10.1.5 完整 代码 展示 











HIMLS 完整 代码 如 下 : 

Ls <!DOCTYPE html> 

二 <html> 

3 <head> 

4. <meta charset="utf-8"> 

Bs <tit1le> 贪 吃 蛇 游戏 的 设计 与 实现 </title> 

6. <link rel="stylesheet" href="css/snake.css"> 

学 </head> 

8。 <body> 

9。 <div id="container"> 

10: <h3> 基 于 HTML5 的 贪 吃 蛇 小 游戏 </h3> 

1: <hr> 

1 <!-- 状 态 信息 栏 --> 

13。 <div id="status"> 

14.。 <!-- 历 史 最 高 分 --> 

15s <div class="box"> 

16. 历史 最 高 分 : <span id="bestScore">0</span> 

Ts </div> 

16: <!-- 当 前 分 数 --> 

了 全 <div class="box"> 

20. 当前 分 数 : <span id="currentScore">0</span> 

2 </div> 

2 </div> 

235 <!-- 设 置 游 戏 画 布 --> 

24. <canvas id="myCanvas" width="400" height="400" style= 
"border:lpx solid"></canvas> 

-人 <div> 

26. <button onclick="window.location.reload()"> 

2 重新 开始 

28 </button> 

于 全 </div> 

30。 </div> 

3 <script> 

3 

33s 

34s 一 一 

35% // 游 戏 界面 刷新 的 间隔 时 间 (数字 越 大 ， 蛇 的 速度 越 慢 ) 

36. var time = 200; 

Ss // 蛇 的 身长 

38: Var 七 = 3; 

39. // 记 录 蛇 的 运行 轨迹 ， 用 数组 记录 每 一 个 坐标 点 

40. var snakeMap = []; 

41. // 蛇 身 单元 大 小 

六 名 Var w= 10; 

43. // 方 向 代码 : 左 37， 上 38， 右 39， 下 40 

44. var direction = 37; 

45. // 蛇 的 初始 坐标 

46. Wa’ Y= DF 

47. Var y= 0; 

48. // 食 物 的 初始 化 坐标 

49. Var foodxX = 0; 第 

50. Var foodY = 0; 

SE /7 当前 得 分 10 
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Var Score = 0; 

// 历 史 最 高 分 纪录 

Var bestScore = 0; 

// 画 布 的 宽 和 高 

var width = 400; 

var height = 400; 

// 根 据 id 找 到 指定 的 画布 

Var C = document .getElementByYId ("myCanvas"); 


// 创 建 2D 的 context 对 象 


Var ctx = c.getContext ("2d"); 


// 获 得 历史 最 高 分 纪录 


ShowBestScore () ; 


// 开 始 游戏 
GameStart (); 





function showBestScore () { 
// 从 本 地 存储 数据 中 读 取 历史 最 高 分 
bestScore = localStorage.getItem("bestScore") ; 
// 如 果 尚未 记录 最 高 分 ， 则 重 置 为 0 
if (bestScore == null) 
bestscore = 0; 
// 将 历史 最 高 分 更 新 到 状态 栏 中 
Var best = document .getElementById ("bestscore"); 
best.innerHTML = bestSscore; 





function GameStart() { 
// 调 用 drawFood () 函数 ， 在 随机 位 置 绘制 第 一 个 食物 
drawFood () 7 


in 
Math.floor (Math.random() * width / w) * w; 


Ll 


和 Math.floor (Math.random() * height / w) * w; 
// 随 机 生成 蛇 的 前 进 方向 


direction = 37 + Math.floor (Math.random() * 4); 


// 每 隔 time 毫 秒 刷新 一 次 游戏 内 容 


setInterval ("gameRefresh()", time); 





/1 
function gameRefresh() { 
// 将 当前 坐标 数据 添加 到 贪 吃 蛇 的 运动 轨迹 坐标 数组 中 
snakeMap.push({ 

Se 

| 
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164. 


DD); 
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drawSsnake () 7 


// 根 据 方向 移动 蛇 头 的 下 一 个 位 置 
Switch (direction) { 
ey) 
case 37: 
xX -= Wi 
break; 
// 上 38 
case 38: 
break; 
// 右 39 
Case 39: 
X += W7 
break; 
// 下 40 
case 40: 
¥ YW 
break; 
} 


// 碰 撞 检 测 ， 返 回 值 0 表示 没有 撞 到 障 但 物 
var code = detectCollision(); 
// 如 果 返 回 值 不 为 0， 表 示 游 戏 失败 

if (code != 0) { 





// 如 果 当 前 得 分 高 于 历史 最 高 分 ， 则 更 新 历史 最 高 分 纪录 


if (score > bestScore) 


localStorage .setItem("bestScore"， Score) 


// 返 回 值 1 表示 撞 到 墙壁 
if (code == 1) { 





} 
// 返 回 值 2 表示 撞 到 蛇 身 


else if (code == 2) { 


alert (" 撞 到 了 墙 辟 ， 游 戏 失败 ! 当前 得 分 : 


"+ score); 


alert (" 撞 到 蛇 身 ,游戏 失败 ! 当前 得 分 : " + score); 


} 

/ /重新 加 载 页面 

window.location.reload(); 
} 


// 吃 到 食物 的 判定 
if (foodqX == x && foodY == Y) { 
// 吃 到 一 次 食物 加 10 分 


Score += 10; 


// 更 新 状态 栏 中 的 当前 分 数 


Var currentscore = document .getElementById 


("currentSscore"); 
currentSscore.innerHTML = score; 
// 在 随机 位 置 绘制 下 一 个 食物 
drawFood (); 

// 蛇 身 的 长 度 加 1 


七 二 十 > 
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5 

166. } 

307s 

168. 

169. 

170s 

Es function drawSnake () { 

172. // 设 置 蛇 身 内 部 的 填充 颜色 

LT ctx.fillstyle = "lightblue"; 

LE / /绘制 最 新 位 置 的 蛇 身 矩形 

LI ctx.fillRect (x, y, WwW, w); 

176. 

到。 // 数 组 只 保留 蛇 身 长 度 的 数据 ， 如 果 蛇 前 进 了 则 删除 最 旧 的 坐标 数据 

136s if (snakeMap.length > t) { 

Ly9: // 删 除数 组 的 第 一 项 ， 即 蛇 的 尾部 的 最 后 一 个 位 置 的 坐标 记录 

180. Var lastBox = snakeMap.shift(); 

181. // 清 除 蛇 的 尾部 的 最 后 一 个 位 置 ， 从 而 实现 移动 效果 

182. ctx.clearRect (lastBox['x'], lastBox['y'], Ww, w); 

183。 } 

184. } 

185s 

186. == 

TBT // 改 变 蛇 方向 的 按键 监听 

1998; f 3 

189. document .onkeydown = function(e) { 

190. // 根 据 按键 更 新 前 进 方向 code: 左 37， 上 38， 右 39， 下 40 

191. if (e.keyCode == 37 || e.keyCode == 38 || e.keyCode == 
39 || e.keyCode == 40) 

192; direction = e.keyCode; 

193。 

194。 

195。 

196. 

97: function detectCollision() { 

198. // 蛇 头 碰撞 到 了 四 周 的 墙壁 ， 游 戏 失败 

199. if (x > width || y > height || x < 01lyY<0){ 

200. return 1; 

201. i 

202. // 蛇 头 碰撞 到 了 蛇 身 ， 游 戏 失败 

203. for (var i = 0; i < snakeMap.length; i++) { 

204. if (snakeMap[i] .x == x && snakeMap[i].y == y) { 

205. return 2; 

206. } 

2073 » 

208 . return 0; 

209. } 

210. 

2 

212. 

213. 

214. function drawFood() { 

215: // 随 机 生成 食物 坐标 

4 foodx = Math.floor (Math.random() * width / w) * w; 

2 foodY = Math.floor (Math.random() * height / w) * w; 

218: // 内 部 填充 颜色 

9。 ctx.fillstyle = "#FF0000"; 


220 /7 绘制 矩形 








区 人 下 5 


ctx.fillRect (foodx, foodY, w, w); 








222% } 

3 </script> 

224. </body> 

225. </html> 

CSS 完整 代码 如 下 : 

Vs body{ 

芝 5 background-color:silver;/* 设 置 页面 的 背景 颜色 为 银色 */ 
3. } 

4.  /# 游 戏 主 界面 的 总 体 样式 */ 

与 5 #container { 

6. text-align: center; 

了 width: 600px; 

8 . margin: auto; 

9 padding:10px; 

10. background-color:white; 
Ls box-shadow: 1l0px 10pPx 1l5px gray; 
126 °F 

13.  /#* 状 态 栏 样式 */ 

14. #status { 

Ts padding: 10px; 

16, width: 400px; 

Ts height: 20px; 

0% margin: auto; 

4 

20. /* 状 态 栏 中 栏目 的 盒子 样式 */ 

2 eg { 

22。 float: left; 

29s width: 200px; 

24. } 

25. /* 设 置 游戏 按钮 样式 */ 

26. button { 

ps width: 200px; 

20: height: S50px; 

人 margin: 10px 0; 

20 border: 0; 

31i outline: none; 

32., font-size: 25px; 

33. font-weight: bold; 

34. color: white; 

35s background-color: lightcoral; 
36% 站 

37.  /#* 设 置 鼠 标 悬 浮 时 的 按钮 样式 */ 

38. button:hover { 

二 全 background-color: coral; 
40. } 





10.2 ”实战 项 目 一 一 企业 文化 用 品 展示 网 页 的 开发 


10.2.1 


本 例 节选 自 客 户 需求 开发 的 真实 项 目 ， 以 安徽 师范 大 学 经 致 科技 文化 传播 有 限 公司 的 


项 目 简介 











如 全 习 用 区 太 侨 你 


HTML5 网 页 确 带 克 计 人 笑 此 








文化 用 品 展示 网 站 首页 为 例 ， 介 绍 如 何 综合 应 用 HTML5、CSS3 与 JavaScript 相关 知识 
发 网 页 。 其 首页 效果 如 图 10-14 所 示 。 该 项 目 将 用 到 HTMLS5 新 增 的 结构 标签 来 架构 网 站 
整体 布局 ， 在 此 基础 上 涉及 了 Ry 代码 配合 使 用 CSS3 来 制作 页 面 动态 效果 。 
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图 10-14 文化 用 品 展示 网 站 首页 效果 图 


10.2.2 ”整体 布局 设计 


该 页 面 根 据 内 容 可 以 分 为 下 面 6 个 部 分 。 

。 网 站 头 部 : 企业 Logo、 名 称 和 宣传 图 。 | 

。 网 站 左 侧 栏 : 新 品 上 市 展示 。 | header ( 企业 名 称 、 Logo 和 宣传 图 | 

。 网 站 动态 图 : 3 张 图 片 动态 切换 。 | | 

。 网 站 右 侧 栏 : 分 为 新 闻 资 讯 与 联系 方 SEE section〈 图 片 轮 播 ) aside( 新 闻 资 讯 

式 两 部 分 。 | 上 市 栏目 与 联系 方式 ) 

。 产品 展示 栏目 : 以 图 片 集合 的 形式 展 

示 产 品 。 | 

。 网 站 尾部 ， 公 司 版 权 信息 与 地 址 信息 。 | 

根据 划分 的 版 块 设计 整体 结构 图 如 图 | 人 
10-15 所 示 。 | 

在 结构 图 中 涉及 的 主要 HTML5 结构 标签 | 





| 
| 


























有 <header>、<aside>、<section>、<footer>。 footer 页 脚 ， 企 业 版 权 信息 和 地 扯 ) 
使 用 这 些 HTML5 新 增 的 结构 标签 创建 网 
页 总 体 架 构 ， 相 关 HTMLS 代码 如 下 : 图 10-15 文化 用 品 展示 网 站 首页 结构 图 





[EE <!DOCTYPE html> 





<html> 
<head> 
<meta charset="utf-8"> 
<title> 经 致 传媒 公司 文化 用 品 网 </title> 
<link rel="stylesheet" href="css/basic.css"> 
<script src="js/html5.js"></script> 
</head> 
<body> 
<header> 
header (企业 名 称 、Logo 和 宣传 图 ) 
</header> 
<div id="container"> 
<aside id="leftAside"> 
aside〔 新 品 上 市 栏目 》 
</aside> 
<section id="slider"> 
section (图 片 轮 播 ) 
</section> 
<aside id="rightAside"> 
aside (新闻 资讯 与 联系 方式 ) 
</aside> 
</div> 
<section id="productShow"> 
section (产品 展示 ) 
</section> 
<footer> 
footer〔 页 脚 ， 企 业 版 权 信 息 和 地 址 》 
</footer> 
</body> 
</html> 





代码 说 明 : 其 中 第 7 行 引用 的 是 一 个 免费 开源 的 JS 文件 (HTMLS5 Shiv), 用 于 兼容 下 


6/7/8 这 3 种 不 支持 使 用 HTML5 新 增 结构 标签 的 浏览 器 。 


由 于 HIML5 只 能 提供 页 面 结构 ， 真 正 的 显示 效果 还 需要 CSS 辅助 形成 ， 因 此 上 述 代 


码 中 的 第 6 行 声明 了 自 定义 名 称 为 basic.css 的 文件 。 
目前 相关 CSS 代码 如 下 : 





/* 页 面 整体 设计 */ 


body { 
background-color: white; 
margin: Opx auto; 
padding: Opx; 
max-width: 990px; 
font-size:14px; 

} 

/* 页 局 */ 

header { 
height: 330px; 
text-align: center; 
width: 990px; 
border: lpx solid red; 

} 

/* 容 器 */ 

#container{ 
text-align: center; 
width: 990px; 
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margin: Opx auto; 


} 
/* 左 侧 栏 */ 
aside#leftAside { 
float: left; 
width: 200px; 
height: 350px; 
text-align: center; 
background-color:#El1EODB; 
border: lpx solid red; 
} 
section{ 
float:left; 





} 

/* 图 片 轮 播 */ 

section#silder { 
float: left; 
width: 520px; 
height: 350px; 
text-align: center; 
margin-left:S5px; 
border: lpx solid red; 


} 
/* 右 侧 栏 */ 
aside#rightAside { 
float: left; 
width: 260px; 
height: 350px; 
text-align: center; 
overflow:hidden; 
margin-left:S5px; 
background-color:#El1EODB; 
border: lpx solid red; 


} 

/* 页 脚 */ 

footer { 
text-align: center; 
vertical-align:middle; 
height: 70px; 
float:left; 
width:990px; 
border: lpx solid red; 





其 中 所 有 的 “border: 1px solid red” 语 句 都 只 是 暂时 为 了 让 布局 结构 更 加 清晰 而 为 元 素 
设置 的 1 像素 宽 的 红色 边框 ， 稍 后 在 开发 过 程 中 会 逐步 去 掉 。 


10.2.3 页 眉 和 页 脚 的 实现 


在 本 例 中 页 眉 和 页 脚 的 实现 较为 简单 。 页 眉 可 以 直接 使 用 设计 图 中 的 素材 作为 元 素 的 
背景 图 片 ， 不 重复 平 铺 即 可 。 页 脚 则 直接 添加 段落 文字 内 容 。 

修改 CSS 文件 ， 为 <header> 元 素 添加 本 地 images 目录 下 的 jnptop1.jpg 作为 背景 图 片 ， 
并 去 掉 边 框 效果 。 相 关 CSS 代码 修改 后 如 下 : 


header { 
height: 330px; 














background:urlI(. ./images/jnptop1.jpg) no-repeat; 
text-align: center; 
width: 990px; 
和 





然后 为 <footer> 元 素 添 加 与 页 眉 一 致 的 灰色 背景 并 去 掉 边 框 效果 ， 在 其 内 部 添加 公司 


的 版 权 信息 与 地 址 。 相 关 CSS 代码 修改 后 如 下 : 





footer { 
text-align: center; 
height: 70px; 
background-color:#E1EODB; 
padding:7px 0; 

} 





在 CSS 中 通过 <body> 元 素 统一 声明 字体 为 14 像素 ， 相 关 CSS 代码 修改 后 如 下 : 


body { 
background-color: white; 
margin: Opx auto; 


padding: Opx auto; 
max-width: 990px; 
font-size:14px; 





此 时 页 眉 和 页 脚 全 部 完成 ， 效 果 如 图 10-16 所 示 。 
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图 10-16 ”网 站 页 眉 和 页 脚 完 成 效果 图 
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10.2.4 主体 内 容 的 实现 hl1( 标 题 ) 


div( 产 品 1) 


主体 内 容 包括 下 面 4 个 部 分 。 
。 网 站 左 侧 栏 ， 新品 上 市 展示 。 
。 网 站 动态 图 : 3 张 图 片 动态 切换 。 
。 网 站 右 侧 栏 ， 分 为 新 闻 资 讯 与 联系 方式 两 部 分 。 WO 
。 产品 展示 栏目 ， 以 图 片 集合 的 形式 展示 产品 。 
1. 网 站 左 侧 栏 的 实现 
网 站 左 侧 栏 是 新 品 上 市 栏目 ， 该 栏目 包括 标题 和 两 个 新 品 
展示 图 片 及 文字 内 容 。 使 用 <h1> 和 <div> 元 素 将 左 侧 栏 划 分 为 3 图 10-17 网 站 左 侧 栏 结构 图 
个 部 分 ， 示 意图 如 图 10-17 所 示 。 
使 用 这 些 标签 创建 网 站 左 侧 栏 架 构 ， 相 关 HTMLS5 代码 修改 如 下 : 
<aside id="leftAside"> 
<h1l>h1l (标题 ) </h1> 
<qdiv>div (产品 1) </div> 


<div>div (产品 2) </div> 
</aside> 

















相关 CSS 代码 如 下 : 


/* 左 侧 栏 - 标 题 */ 
aside#leftAside hil{ 
height:40px; 
margin:0px; 
border: lpx solid red; 


} 

/* 左 侧 栏 -内 容 */ 

aside#leftAside divt{ 
height:150px; 
text-align: center; 
margin-left:7px; 
border: lpx solid red; 





} 


同样 这 里 的 边框 设置 为 1 像素 宽 的 红色 实 线 是 为 了 使 讲解 过 程 中 栏目 布局 结构 更 加 清 

后 续 将 逐步 去 掉 边框 效果 。 

接 下 来 开始 添加 实际 内 容 , 首先 是 添加 标题 。 由 于 标题 单 击 后 还 希望 跳 转 至 二 级 页 面 ， 

因此 使 用 超 链 接 标签 <a> 进 行 制作 , 在 内 部 嵌入 <img> 图 像 。 相关 HTML5 代码 修改 后 如 下 : 
<hl> 


<a href="#"><img src="images/newproduct/xpss.jpg"></a> 
</h1> 


然后 分 别 为 两 个 <div> 元 素 添加 <img> 图 像 ， 相 关 HIMLS 代码 修改 后 如 下 : 


<div> 

<img src="images/newproduct/xpll.jpg"> 
</div> 
<div> 

<img src="images/newproduct/xp22.jpg"> 


晰 















































</div> 





在 CSS 中 为 左 侧 栏 和 其 中 的 结构 元 素 统一 去 掉 红 色 边 框 , 并 为 左 侧 栏 添加 灰色 背景 颜 


色 。 相 关 CSS 代码 修改 后 如 下 : 





/* 左 侧 栏 #/ 

aside#leftAside { 
float: left; 
width: 200px; 
height: 350px; 
text-align: center; 
background-color:#E1EODB; 


} 

/* 左 侧 栏 -标题 */ 
aside#leftAside hil{ 
height:40px; 

margin:0Opx; 


} 

/* 左 侧 栏 -内 容 */ 

aside#leftAside divt{ 
height:150px; 
text-align: center; 
margin-left:7px; 





运行 效果 如 图 10-18 所 示 。 
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图 10-18 网 站 左 侧 栏 实现 效果 图 
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2. 图 片 轮 播 效果 的 实现 

该 栏目 有 3 张 素材 图 片 需要 进行 自动 轮 播 , 可 以 使 用 jQuery 技术 来 实现 图 片 的 淡 入 淡 
出 效果 。 首 先 在 HIMLS 页 面 的 <head> 标 签 内 添加 对 于 jQuery 的 声明 。 修 改 后 的 HTML5 
代码 片段 如 下 : 


<head> 
<meta charset="utf-8"> 
<title> 经 致 传媒 公司 文化 用 品 网 </title> 
<link rel="stylesheet" href="css/basic.css"> 
<script src="js/jquery-1.12.3.min.js"></script> 
<script src="js/html5.js"></script> 

</head> 


相关 HIMLS 代码 修改 如 下 : 


<section id="silder"> 
<ul> 
<1i> 
<img src="images/slider/t1.jpg"/> 
<H14> 
<1li class="hide"> 
<img src="images/slider/t2.jpg" /> 
</1i> 
<1li class="hide"> 
<img src="images/slider/t3.jpg" /> 
</1i> 
</ul> 
</section> 





















新 增 CSS 代码 如 下 : 





/* 图 片 轮 播 */ 
section#silder { 
float: left; 
width: 520px; 
height: 350px; 
text-align: center; 
margin-left:S5px; 


} 

/* 图 片 轮 播 -列表 元 素 样式 设置 */ 

section#silder ul { 
list-style: none; 
position: relative; 
width: 520px; 
height: 350px; 
padding:0; 
margin:0; 


8 
/* 图 片 轮 播 -列表 选项 元 素 样式 设置 */ 
section#silder 1i { 
position: absolute; 
top: Opx; 
left: Opx; 
width: 520px; 
height: 350px; 
float: left; 
text-align: center; 





padding: 0; 
margin: 07 


} 

/* 图 片 轮 播 -图 片 样式 设置 */ 

section#silder img { 
width: 100%; 
height: 100%; 


} 
/* 图 片 轮 播 -隐藏 效果 设置 */ 
.hide { 

display: none; 


} 


相关 jQuery 代码 如 下 : 


<script> 
// 当 前 图 片 序号 
var index = 0; 
// 每 3 秒 切 换 下 一 张 图 片 
setInterval ("next ()", 3000); 
// 切 换 下 一 张 图 片 
function next() { 
// 当 前 图 片 淡出 
$("li:eq(" + index + ")") .fadeout (1500); 
// 判 断 当前 图 片 是 否 为 最 后 一 张 
if (index == 2) 
// 如 果 是 最 后 一 张 ， 序 号 跳 转 到 第 一 张 
index = 0; 
else 
/ /否则 图 片 序号 自 增 1 
index++; 
// 新 图 片 淡 入 
$ ("li:eq(" + index + ")").fadeIn(1500); 








} 
</script> 





上 述 代码 采用 了 jQuery 技术 中 的 fadeIn0 与 fadeOut0 函 数 来 实现 图 片 的 淡 入 和 淡出 效 
果 。 每 隔 3 秒 将 自动 切换 下 一 张 图 片 ， 如 果 到 了 最 后 一 张 ， 播 放 完毕 则 回 到 第 一 张 循环 播放 。 
同样 , 最 后 需要 去 掉 红 色 边框 , 对 于 修改 这 里 不 再 次 述 。 图片 轮 播 动态 效果 如 图 10-19 所 示 。 
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(a) 图 片 轮 播 第 一 张 (b) 图 片 轮 播 第 二 张 








(c) 图 片 轮 播 第 三 
图 10-19 网 站 图 片 轮 播 实现 效果 图 
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3. 网 站 右 侧 栏 的 实现 

网 站 右 侧 栏 包括 新 闻 资 讯 和 联系 方式 两 个 部 分 。 使 用 
<article> 和 <div> 元 素 将 右 侧 栏 划分 为 上 、 下 两 个 部 分 ， 其 中 新 
闻 资 讯 部 分 又 分 成 标题 与 新 闻 列 表 。 使 用 结构 标签 划分 的 示意 
图 如 图 10-20 所 示 。 

使 用 这 些 标签 创建 网 站 右 侧 栏 架 构 , 相关 HTMLS 代码 修改 
如 下 : 


<aside id="rightAside"> 
<article> 
<h1> hl (标题 ) </h1l> 
<div id="news"> 
div (新 闻 资 讯 ) 
</div> 
</article> 
<div id="contact"> 
div〔 联 系 方式 ) 
</div> 
</aside> 


div (新 闻 资讯 ) 








div (联系 方式 ) 

























图 10-20 ”网 站 右 侧 栏 结构 图 









相关 CSS 代码 如 下 : 





/* 右 侧 栏 -标题 */ 

aside#rightAside hlt 
width: 264px; 
height: 40px; 
margin:0px; 
padding:0px; 

border: lpx solid red; 


} 

/* 右 侧 栏 -新 闻 */ 

aside#rightAside div#news{ 
width: 264px; 

height: 160px; 

border: lpx solid red; 


} 

/* 右 侧 栏 -联系 我 们 */ 

aside#rightAside div#contact{ 
width: 264px; 

height: 140px; 

border: lpx solid red; 

§ 





同样 ， 这 里 的 边框 设置 为 1 像素 宽 的 红色 实 线 是 为 了 使 栏目 布局 结构 更 加 清晰 ， 后 续 
接 下 来 开始 添加 实际 内 容 , 首先 是 添加 标题 。 由 于 标题 单 击 后 还 希望 跳 转 至 二 级 页 面 ， 
因此 使 用 超 链 接 标 签 <a> 进 行 制作 , 在 内 部 嵌入 <img> 图 像 。 相 关 HIMLS 代码 修改 后 如 下 : 














<h1> 
<a href="#"><img src="images/news/zxzx.jpg"></a> 
</h1> 





然后 在 id- "news" 的 <div> 元 素 中 使 用 <ul> 元 素 制作 新 闻 列 表 。 由 于 新 闻 单 击 后 需要 跳 


转 至 正文 页 面 ， 因 此 在 <ul> 的 每 一 项 列表 元 素 <li> 后 面 添加 超 链接 <a>。 相 关 HIMLS 代码 





如 下 : 





<div id="news"> 
<ul> 


<1i><a href="#"> 测 试 新 闻 ， 
<1i><a href="#"> 测 试 新 闻 ， 
<1i><a href="#"> 测 试 新 闻 ， 
<1i><a href="#"> 测 试 新 闻 ， 
<1i><a href="#"> 测 试 新 闻 ， 
<1i><a href="#"> 测 试 新 闻 ， 
<1i><a href="#"> 测 试 新 闻 ， 
<1i><a href="#"> 测 试 新 闻 ， 


</ul> 
</div> 


仅 供 测试 使 用 </a> 
仅 供 测试 使 用 </a> 
仅 供 测试 使 用 </a> 
仅 供 测试 使 用 </a> 
仅 供 测试 使 用 </a> 
仅 供 测试 使 用 </a> 
仅 供 测试 使 用 </a> 
仅 供 测试 使 用 </a> 





由 于 当前 尚未 录入 真正 的 新 闻 ， 因 此 先 使 用 测试 文字 和 链接 地 址 表示 。 
然后 为 <div id="contact"> 元 素 添加 <img> 图 像 ， 相 关 HIMLS 代码 修改 后 如 下 : 


<div id="contact"> 


<img src="images/contact/1lxfs.jpg"> 


</div> 





在 CSS 中 为 左 侧 栏 和 其 中 的 结构 元 素 统一 去 掉 红 色 边 框 , 并 为 左 侧 栏 添加 灰色 背景 颜 


色 。 相 关 CSS 代码 修改 后 如 下 : 


o 





/* 右 侧 栏 */ 

aside#rightAside { 
float: left; 
width: 260px; 
height: 350px; 
text-align: center; 
overflow:hidden; 
margin-left:5px; 
background-color:#E1EODB; 


} 

/* 右 侧 栏 -标题 */ 
aside#rightAside hl{ 
width: 264px; 
height: 40px; 
margin:0px; 
padding:0px; 


/* 右 侧 栏 -新 闻 */ 
aside#rightAside div#news{ 
width: 264px; 

height: 170px; 


/* 右 侧 栏 -联系 我 们 */ 
aside#rightAside div#contact{ 
width: 264px; 

height: 130px; 








运行 效果 如 图 10-21 所 示 。 
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图 10-21 


4. 产品 展示 栏目 的 实现 
该 栏目 需要 将 14 张 产品 图 片 以 2 行 7 列 的 方式 展示 出 来 ， 并 且 单 击 产品 小 图 可 以 放 

大 查看 预览 图 。 可 以 使 用 无 边框 的 表格 来 制作 产品 页 面 画 面 ， 使 用 <hl> 和 <table> 元 素 将 产 
品 展示 栏目 分 为 两 部 分 ， 示 意图 如 图 10-22 所 示 。 


网 站 右 侧 栏 实现 效果 图 


h1( 标 题 ) 





td 单元 格 ， 用 于 显 |td( 单 元 格 ， 用 于 显 
元 图 片 ) 示 图 片 ) 


td 单元 格 , 用 于 显 
示 图 片 ) 


td 单元 格 ， 用 于 显 | 
示 图 片 ) 


td 单元 格 ,用 于 星 | 
示 图 片 ) 


td( 单 元 格 ， 用 于 显 
示 图 片 ) 


td( 单 元 格 ， 用 于 显 
示 图 片 ) 











|td( 单 元 格 ， 用 于 显 | td 单元 格 ， 用 于 显 | 
示 图 片 ) 元 图片) 











td 单元 格 ， 用 于 显 | 
元 图 片 ) 








td 人 单元 格 ， 用 于 显 | 
示 图 片 ) 














td 单元 格 ， 用 于 显 | 
示 图 片 ) 








图 10-22 网 站 右 侧 栏 实现 效果 图 


表格 元 素 <table> 内 部 包含 了 两 个 单元 行 <t>， 每 个 <tr> 中 包含 7 个 单元 格 <td>。 
将 相关 代码 添加 到 id="productShow" 的 <section> 内 部 ， 修 改 后 的 HIMLS 代码 如 下 : 


td 单元 格 ， 用 于 显 
示 图 片 ) 





td 单元 格 ， 用 于 显 
示 图 片 ) 











<tr> 
<td>td 7 -显示 图 片 ) </td> 
<td>td r -显示 图 片 ) </td> 
<td>td -显示 图 片 ) </td> 
<td>td 7 显示 图 片 )》 </td> 
<td>td 7 -显示 图 片 ) </td> 
<td>td -显示 图 片 ) </td> 
<td>td F -显示 图 片 ) </td> 

/tr> 

ES 


<td>td r “显示 图 片 ) </td> 

<td>td ~ 显示 图 片 ) </td> 

<td>td “显示 图 片 ) </td> 

<td>td -显示 图 片 ) </td> 

<td>td 7 -显示 图 片 ) </td> 

<td>td C -显示 图 片 ) </td> 

<td>td F -显示 图 片 ) </td> 
/Er> 
</table> 

</section> 











对 应 的 CSS 代码 如 下 : 








/* 产 品 展示 栏 */ 

section#productShow { 
height: 285px; 
border: lpx solid red; 
clear: both; 
text-align: center; 
margin:0px; 
padding:0px; 


} 

/* 产 品 展示 栏 -标题 */ 

Section#productShow hl{ 
height: 40px; 
margin:0px; 
padding:0px; 
border: lpx solid red; 


} 

/* 产 品 展示 栏 -表格 */ 

Section#productShow table{ 
margin:0px; 
padding:0px; 
border: lpx solid red; 
width:100%; 
height:245px; 





/* 产 品 展示 栏 -单元 格 */ 
Section#productShow tdf 
height:50%; 
border: lpx solid red; 
} 





其 中 ，<table> 元 素 的 宽度 设置 为 100% 可 以 自 适应 父 元 素 的 宽度 ， 而 <td> 元 素 在 表格 
中 只 有 两 行 ， 因 此 设置 其 高 度 为 50%。 同 样 这 里 的 边框 设置 为 1 像素 宽 的 红色 实 线 是 为 了 








使 栏目 布局 结构 在 讲解 时 更 加 清晰 ， 后 续 将 逐步 去 掉 边 框 效果 。 





会 磋 用 区 矿 颁 侈 





HTML5 克 页 所 纲 族 矿 实战 





接 下 来 开始 添加 实际 内 容 , 首先 是 添加 标题 。 由 于 标题 单 击 后 也 需要 跳 转 至 二 级 页 面 ， 























因此 同样 使 用 超 链接 标签 <a> 进 行 制作 ， 在 内 部 嵌入 <img> 图 像 。 








相关 HIMLS 代码 修改 后 如 下 : 





<hl> 
<a href="#"><img src: 
</h1> 





images/product/rxcp.jpg"></a> 














然后 在 表格 的 <td> 元 素 中 使 用 <img> 元 素 展示 图 片 ， 相 关 HTMLS5 代码 如 下 : 











<table border="0"> 





tr> 
<td><img src="images/product/1.jpg"></td> 
<td><img images/product/2.jpg"></td> 
<td><img images/product/3.jpg"></td> 
<td><img images/product/4.jpg"></td> 
<td><img images/product/5.jpg"></td> 


</ 





<td><img src="images/product/6.jpg"></td> 
<td><img src="images/product/7.jpg"></td> 
E> 


<tr> 


<td><img src="images/product/8.jpg"></td> 


<td><img images/product/9.jpg"></td> 
<td><img images/product/10.jpg"></td> 
<td><img images/product/11.jpg"></td> 
<td><img images/product/12.jpg"></td> 





<td><img images/product/13.jpg"></td> 
<td><img src="images/product/14.jpg"></td> 
</tr> 
</table> 





在 上 述 代码 中 ，<img> 元 素 的 src 属性 值 仅 为 示例 ,可 根据 实际 需要 后 期 蔡 换 成 其 他 产 
品 图 片 。 如 果 客 户 允 许 后 续 维护 过 程 中 图 片 名 称 保持 不 变 ， 开 发 者 也 可 以 将 此 部 分 内 容 使 
用 JavaScript 代码 批量 生成 。 

最 后 在 CSS 文件 中 对 产品 展示 栏 的 样式 进行 调整 , 去掉 所 有 结构 标签 的 红色 边框 并 为 该 栏 
目 添加 灰色 背景 ， 最 后 根据 页 面 效 果 对 元 素 尺 寸 进行 轻微 调整 。 相 关 CSS 代码 修改 后 如 下 : 

/*# 产 品 展示 栏 */ 


section#productShow { 
width:990px; 
height: 295px; 
clear: both; 
text-align: center; 
background-color:#E1EODB; 
margin-bottom: 7px; 
padding:0px; 


} 

/* 产 品 展示 栏 -标题 */ 

Section#productShow hli 
height: 40px; 
margin:0px; 
padding:0px; 


} 
/* 产 品 





展示 栏 -表格 */ 





section#productShow tablet{ 





margin:0px; 
padding:0px; 
width:100%; 
height:245px; 





} 

/* 产 品 展示 栏 - 单 元 格 */ 

section#productShow tdf{ 
height:50%; 


} 
/* 产 品 展示 栏 -单元 格 内 的 图 片 */ 
section#productShow td imgf 
width:100%; 
height:100%; 
} 





运行 效果 如 图 10-23 所 示 。 
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图 10-23 网 站 首页 实现 效果 图 


此 时 网 站 的 首页 平面 图 已 经 全 部 开发 完成 ， 最 后 还 需要 为 产品 展示 栏 实现 单 击 查 看 放 


大 图 片 效果 的 jQuery 特效 。 
S， 产品 图 片 单 击 放大 的 实现 





客户 需求 当 用 户 单 击 产品 展示 栏目 中 的 小 图 片 时 可 以 跳出 一 个 新 的 其 浮 框 并 展示 该 
产品 的 大 图 效果 。 也 就 是 说 该 内 容 正 常情 况 下 为 隐藏 状态 ， 当 用 户 单 击 产品 图 片 时 才 呈 现 





在 页 面 上 。 


首先 在 页 面 上 设计 该 版 块 ， 使 用 <div> 元 素 在 页 脚 之 前 添加 悬浮 框 ， 并 且 使 用 <button> 


和 <img> 元 素 创建 “关闭 ”按钮 与 图 片 展示 区 域 。 相 关 HTMLS5 代码 如 下 : 





如 会 习 用 区 太 侨 你 
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<div id="showImage"> 
<button> 


<img src="images/product/close.png"” alt=" 关 闭 " width="40" 
height="40"> 
</button> 
<img src="" alt=" 图 片 暂 无 " width="100%" id="productImg"> 
</div> 


其 中 ， 按 钮 的 图 片 素材 可 以 由 开发 者 自 定义 。 当 前 由 于 不 确定 大 图 的 尺寸 ， 因 此 将 用 
于 展现 产品 放大 图 的 <img> 设 置 宽度 为 100%。 为 了 区 分 按钮 中 的 图 片 标签 ， 为 产品 展示 区 
的 <img> 元 素 设置 自 定义 id 名 称 productImg。 

在 CSS 中 为 该 区 域 及 内 部 按钮 和 图 片 设置 样式 。 将 <div> 元 素 的 z-index 值 设置 为 99， 
使 其 置顶 不 影响 整体 页 面 效果 。 


/* 放 大 图 片 页 面 */ 

#showImage{ 
z-index:99; 
position:absolute; 
left:20%; 
top:350px; 
width:850px; 
height:500px; 
background-color:white; 
text-align:center; 


























} 
/* 放 大 图 片 页 面 的 “关闭 ”按钮 */ 


#showImage buttont{ 
float:right; 
margin:10px; 
outline:none; 
border:none; 
background-color:transparent; 





此 时 预览 效果 如 图 10-24 所 示 ， 当前 还 没有 指定 放大 的 产 : 品 图 片 ， 因此 暂 无 实际 内 容 。 
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图 10-24 产品 放大 展示 区 效果 草图 


接 下 来 使 用 jQuery 制作 图 片 显示 效果 。 首 先 修改 CSS 代码 中 产品 放大 页 面 的 display 
属性 值 为 none， 使 其 初始 为 隐藏 状态 。 相 关 代码 修改 后 如 下 : 


/* 放 大 图 片 页 面 */ 

#showImage{ 
z-index:99; 
position:absolute; 
left:20%; 
top:350px; 
width:850px; 
height:500px; 
background-color:white; 
text-align:center; 
display:none; 








此 时 id="showImage" 的 <div> 元 素 将 被 隐藏 , 页 面 初始 加 载 时 将 恢复 为 未 添加 该 元 素 前 
的 样式 效果 。 
在 JavaScript 中 自 定义 函数 showImage(name) 用 于 指定 需要 放大 查看 的 产品 图 片 , 其 中 
name 对 应 图 片 名 称 。 相 关 代码 如 下 : 
// 产 品 大 图 展示 
function showImage (name){ 
// 产 品 放 大 区 域 淡 入 
$("#showImage") .fadeIn (500); 
// 指 定 查 看 的 图 片 路 径 


$("#productImg") .attr ("src","images/product/large/"+name+".jpg"); 





上 述 代 码 表示 ， 在 0.5 秒 内 淡出 id="showImage" 的 <div> 元 素 ， 并 将 其 中 的 图 片 路 径 中 
的 图 片 名 称 更 新 为 name 参数 传递 的 值 。 

为 所 有 产品 展示 区 表格 中 的 图 片 添加 onclick 事件 调用 showImage() 方 法 ， 并 将 图 片 名 
称 作为 参数 传递 。 修 改 后 的 HTML5 代码 片段 如 下 : 


<section id="productShow"> 
<hl><a href="#"><img src="images/product/rxcp.jpg"></a></h1> 
<table border="0"> 
<tr> 
<td><img src="images/product/1.jpg" onclick="showImage (1) "></td> 
<td><img src="images/product/2.jpg" onclick="showImage (2) "></td> 
<td><img src="images/product/3.jpg" onclick="showImage (3) "></td> 
<td><img src="images/product/4.jpg" onclick="showImage (4) "></td> 
<td><img src="images/product/5.jpg" onclick="showImage (5) "></td> 
<td><img src="images/product/6.jpg" onclick="showImage (6) "></td> 
<td><img src="images/product/7.jpg" onclick="showImage (7) "></td> 
</tr> 
< 
<td><img src="images/product/8.jpg" onclick="showImage (8) "></td> 
<td><img src="images/product/9.jpg" onclick="showImage (9) "></td> 











如 全 三 用 友 矿 笑 例 
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<td><img src="images/product/10.jpg" onclick="showImage (10) "></td> 

<td><img src="images/product/11.jpg" onclick="showImage (11) "></td> 

<td><img src="images/product/12.jpg" onclick="showImage (12) "></td> 

<td><img src="images/product/13.jpg" onclick="showImage (13) "></td> 

<td><img src="images/product/14.jpg" onclick="showImage (14) "></td> 
</tr> 
</table> 

</section> 


dealin 运行 效果 如 图 10-25 所 示 。 
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(a) 页 面 初始 加 载 效 果 (Cb) 单 击 产品 查看 放大 图 效果 





图 10-25 产品 放大 展示 区 效果 完成 图 


最 后 为 “关闭 ”按钮 添加 onclick 事件 ， 相 关 HIMLS 代码 修改 后 如 下 : 


<button onclick="closeImage () "> 


<img src="images/product/close.png" alt=" 关 闭 " width="40" height="40"> 
</button> 


在 JavaScript 中 定义 closeImasge(0 方 法 ， 相 关 代码 如 下 : 
// 关 闭 产品 大 图 


function closeImage() { 
// 产 品 放大 区 域 淡 出 
$("#showImage") .fadeout (500) 7 














上 述 代 码 表示 在 0.5 秒 内 淡出 id="showImage" 的 <div> 元 素 。 

关闭 效果 运行 ， 如 图 10-26 所 示 。 

至 此 ， 整 个 项 目的 开发 就 全 部 完成 了 。 该 项 目 综合 应 用 了 HTMLS5 结构 化 标签 架构 网 
页 布局 、CSS3 美化 页 面 以 及 jQuery 实现 更 为 灵活 的 动态 效果 ， 后 续 还 可 以 根据 客户 的 需 
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(a) 单 击 产品 查看 放大 图 效果 (b) 单 击 “ 关 闭 ”按钮 隐藏 放大 图 效果 
图 10-26 产品 放大 展示 区 关闭 效果 图 


10.2.5 完整 代码 展示 


HTMLS5 完整 代码 如 下 : 








<!DOCTYPE html> 

3 <html> 

3 <head> 

4. <meta charset="gb2312"> 

5. <title> 经 致 传媒 公司 文化 用 品 网 </title> 

6 <link rel="stylesheet" href="css/basic.css"> 

7 <script src="js/jquery-1.12.3.min.js"></script> 

8. <script src="js/html5.js"></script> 

: </head> 

40. <body> 

Ls <header></header> 

2: <div id="container"> 

135 <aside id="leftAside"> 

45 <hl><a href="#"><img src="images/newproduct/xpss.jpg" 
style="border:0px;"></a></h1> 

5 <div><img src="images/newproduct/xpll.jpg"> 

es </div> 

Ts <div><img src="images/newproduct/xp22.jpg"> 

= </div> 

Ls </aside> 

20. <section id="silder"> 

21. <ul> 

人 <1i> 

Zs <img src="images/slider/tl1.jpg"/> 

24. </1i> 第 

5。 <li class="hide"> 10 





综合 三 用 友 矿 笑 例 
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5 漂 <img src="images/slider/t2.jpg" /> 

21s </1i> 

28. <li class="hide"> 

29. <img src="images/slider/t3.jpg" /> 

30. </1i> 

31s </ul> 

时 </section> 

33 <aside id="rightAside"> 

345 <article> 

355 <hl><a href="#"><img src="images/news/zxzx.jpg" 

style="border:0px;"></a></h1> 

36. <div id="news"> 

37s <ul> 

38. <1i><a href="#"> 测 试 新 闻 ， 仅 供 测试 使 用 </a> 

39. <li><a "> 测试 新 闻 ， 仅 供 测试 使 用 </a> 

40. <li><a > 测试 新 闻 ， 仅 供 测试 使 用 </a> 

4a. <li><a 仅 供 测试 使 用 </a> 

42. <1i><a href="#"> 测 试 新 闻 ， 仅 供 测 试 使 用 </a> 

43. <1i><a href="#"> 测 试 新 闻 ， 仅 供 测试 使 用 </a> 

44. <1i><a href="#"> 测 试 新 闻 ， 仅 供 测试 使 用 </a> 

45. <1i><a href="#"> 测 试 新 闻 ， 仅 供 测试 使 用 </a> 

46. </ul> 

47. </div> 

48. </article> 

49. <div id="contact"> 

S50s <img src="images/contact/lxfs.jpg"> 

bo </div> 

52: </aside> 

本 3 </div> 

54. 

55。 <section id="productShow"> 

56 . <h1><a href="#"><img src="images/product/rxcp.jpg" style= 

"border:0px;"></a></h1> 

57. <table border="0"> 

S's <tr> 

59, <td><img src="images/product/1.jpg" onclick="showImage 
(1) "></td> 

60 . <td><img src="images/product/2.jpg" onclick="showImage 
{2}y"></td> 

61s <td><img src="images/product/3.jpg" onclick="showImage 
(3) "></td> 

62 . <td><img src="images/product/4.jpg" onclick="showImage 
(4)"></td> 

§3s <td><img src="images/product/5.jpg" onclick="showImage 
(5)"></td> 

64. <td><img src="images/product/6.jpg" onclick="showImage 
(6) "></td> 

65 . <td><img src="images/product/7.jpg" onclick="showImage 
《7) ><7Ld> 

66. tr> 

67. <tEES 

68 . <td><img src="images/product/8.jpg" onclick="showImage 
(8) "></td> 

69 . <td><img src="images/product/9.jpg" onclick="showImage 
(9) "></td> 

70. <td><img src="images/product/10.jpg" onclick="showImage 
(10) "></td> 

Ts <td><img src="images/product/11.jpg" onclick="showImage 


TS 








了 2 <td><img src="images/product/12.jpg" onclick="showImage 
(12) "></td> 


3 <td><img src="images/product/13.jpg" onclick="showImage 
(13) "></td> 
74. <td><img src="images/product/14.jpg" onclick="showImage 
(14)"></td> 
二 /tr 
76. </table> 
江村 </section> 
78 . <div id="showImage"> 
79 . <button onclick="closeImage () "><img src="images/product/ 
close.png"” alt=" 关 闭 " width="40" height="40"> 
80 . </button> 
81. <img src="" alt=" 图 片 暂 无 " width="100%" id="productImg"> 
82. </div> 
9835 <p> 
84. <script> 
9554 // 当 前 图 片 序号 
86. var index = 0; 
87s $ (document) .ready (function() { 
88. setInterval ("next()", 3000); 
89-。 }) 7 
90。 
91. // 切 换 下 一 张 图 片 
92 . function next() { 
93. // 当 前 图 片 淡出 
94. $ ("li:eq(" + index + ")") .fadeout (1500); 
95. // 判 断 当前 图 片 是 否 为 最 后 一 张 
96 . if (index == 2 
Sm // 如 果 是 最 后 一 张 ， 序 号 跳 转 到 第 一 张 
98 . index = 0; 
9 else 
100. // 否 则 图 片 序号 白 增 1 
101. index++; 
102. // 新 图 片 淡 入 
103. $ ("li:eq(" + index + ")").fadeIn(1500); 
104. } 
05s 
106. // 产 品 大 图 展示 
RORS function showImage (name) { 
108 . // 产 品 放 大 区 域 淡 入 
109. $("#showImage") .fadeIn (500); 
LO // 指 定 查 看 的 图 片 路 径 
和 $ ("#productImg") .attr("src", "images/product/large/ 
"+name+ ".jpg"); 
了 
113。 
114. // 关 闭 产品 大 图 
Ls function closeImage() { 
116. / /产品 放大 区 域 淡出 
$ ("#showImage") .fadeout (500); 
118. } 
和 </script> 
120. </div> 
了 </p> 
122. <footer> 
LS <p> 
js 安徽 师范 大 学 经 致 科技 文化 传播 有 限 公 司 版 权 所 有 2016 
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TR <br> 
126. 地 址 : 安徽 省 芜湖 市 九 华南 路 189 号 安徽 师范 大 学 〈 花 津 校 





和 </p> 
L205 </footer> 
129. </body> 

130. </html> 





CSS 完整 代码 如 下 : 


/* 页 面 整体 设计 */ 

body { 
background-color: white; 
margin: Opx auto; 
padding: Opx; 
max-width: 990px; 
font-size:14px; 


omwmwwmn 


本 

/#+ 页 眉 */ 

header { 
height: 330px; 
background:url(../images/jnptopl.jpg) no-repeat; 
text-align: center; 
width: 990px; 

} 

/+* 容 器 */ 

#containert{ 
text-align: center; 
width: 990px; 
margin: Opx auto; 


/* 左 侧 栏 */ 

aside#leftAside { 
float: left; 
width: 200px; 
height: 350px; 
text-align: center; 
background-color:#E1EODB; 

} 

/* 左 侧 栏 -标题 */ 

aside#leftAside hlt{ 
height:40px; 
margin:0px; 

} 

/* 左 侧 栏 -内 容 */ 

aside#leftAside divi 
height:150px; 
text-align: center; 
margin-left:7px; 

} 


section{ 
float:left; 
} 


/* 图 片 轮 播 */ 
section#silder { 
float: left; 





width: 520px; 
height: 350px; 
text-align: center; 
margin-left:5px; 


/* 图 片 轮 播 - 列 表 元 素 样式 设置 */ 
section#silder ul { 
list-style: none; 
position: relative; 
width: 520px; 
height: 350px; 





} 

/* 图 片 轮 播 - 列 表 选 项 元 素 样式 设置 */ 

section#silder 1i { 
position: absolute; 
top: Opx; 
left: Opx; 
width: 520px; 
height: 350px; 
float: left; 
text-align: center; 
padding: 0; 
margin: 0; 

下 

/* 图 片 轮 播 -图 片 样式 设置 */ 

section#silder img { 
width: 100%; 
height: 100%; 

} 

/* 图 片 轮 播 -隐藏 效果 设置 */ 

.hide { 
display: none; 

4 


/* 右 侧 栏 */ 

aside#rightAside { 
float: left; 
width: 260px; 
height: 350px; 
text-align: center; 
overflow:hidden; 
margin-left:5px; 
background-color:#El1EODB; 

» 

/* 右 侧 栏 -标题 */ 

aside#rightAside hl{ 
width: 264px; 
height: 40px; 
margin:0px; 
padding:0px; 


} 
/* 右 侧 栏 -新 闻 */ 


. aside#rightAside div#newst{ 


width: 264px; 
height: 170px; 
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108. /* 右 侧 栏 -联系 我 们 */ 
109. aside#rightAside div#contact{ 


Mao， width: 264px; 
PELs height: 130px; 
112; 





} 
113 . /* 右 侧 栏 -新 闻 - 列 表 */ 
114. #news ulf{ 


了 和 list-style: none; 
116. margin:0px; 

LT padding:0px; 

1 和 text-align:left; 
LL 


} 
120. /# 右 侧 栏 -新 闻 -列表 选项 */ 


121. #news ul 1i{ 


Ls height:20px; 
123。 line-height:20px; 
下 2 下 


+ 
125 . /# 右 侧 栏 -新 闻 - 超 链接 */ 
126. #news af 


127s text-decoration:none; 
128: color:black; 

E29 3 

130. 


131. /* 产 品 展示 栏 */ 


132. section#productShow { 


3s width:990px; 

134. height: 295px; 

L135s clear: both; 

136。 text-align: center; 

137。 background-color:#E1EODB; 
138. margin-bottom:7px; 

139: padding:0px; 

140. 





} 
141.。/* 产 品 展示 栏 -标题 */ 
142. section#productShow hil{ 





143. height: 40px; 
144. margin:0px; 
Ls padding:0px; 
146. 


} 
147.。/* 产 品 展示 栏 -表格 */ 
148. section#productShow table{ 


149. margin:0px; 
150. padding:0px; 
151s width:100%; 
152. height:245px; 
153: 


} 
154.。/* 产 品 展示 栏 -单元 格 */ 
155. section#productShow tatf 
156。 height:50%; 
| 
158 . /* 产 品 展示 栏 -单元 格 内 的 图 片 */ 
159. section#productShow td imgt{ 


160. width:100%; 
161. height:100%; 
162. 


} 
163. /* 放 大 图 片 页 面 */ 
164. #showImage{ 
LD z-index:99; 





position:absolute; 
left:20%; 

top:350px; 

width:850px; 
height:500px; 
background-color:white; 
text-align:center; 
display:none; 


} 
/* 放 大 图 片 页 面 -“ 关 闭 ” 按 钮 */ 


#showImage buttont{ 
float:right; 
margin:10px; 


outline:none; 
border:none; 
background-color:transparent; 

} 

/* 页 脚 */ 

footer { 
text-align: center; 
vertical-align:middle; 
height: 70px; 
background-color:#E1EODB; 
padding:7px 0; 
float:left; 
width:990px; 
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es 


























感谢 您 一 直 以 来 对 清华 版 图 书 的 支持 和 爱护 。 为 了 配合 本 书 的 使 用 ,本 书 
提供 配套 的 素材 ,有 需求 的 用 户 请 到 清华 大 学 出 版 社 主 页 (http://www. tup. 
com. cn) 上 查询 和 下 载 , 也 可 以 拨打 电话 或 发 送 电子 邮件 咨询 。 

如 果 您 在 使 用 本 书 的 过 程 中 遇 到 了 什么 问题 ,或 者 有 相关 图 书 出 版 计划 ， 
也 请 您 发 邮件 告诉 我 们 ,以 便 我 们 更 好 地 为 您 服务 。 
















































































我 们 的 联系 方式 : 
地 址 : 北京 海淀 区 双 清 路 学 研 大 厦 A 座 707 





邮 编 : 100084 


电 话 : 010 一 62770175 一 4604 








资源 下 载 : http://www.tup.com.cn a 
电子 邮件 : weijj@tup. tsinghua. edu. cn 


QQ: 883604( 请 写 明 您 的 单位 和 姓名 ) 


用 微 信 扫 一 扫 右 边 的 二 维 码 , 即 可 关注 清华 大 学 出 版 社 公 众 号 “ 书 圈 ”。 


